Info de pantalla y navegador

Visualiza resolución de pantalla, tamaño de ventana, navegador y detalles del dispositivo en tiempo real

¿Qué es y cómo funciona?

La información de pantalla — resolución, densidad de píxeles, relación de píxeles del dispositivo, profundidad de color, orientación y dimensiones del viewport — es esencial para el diseño web responsivo y la depuración de problemas de pantalla. Un monitor de "2560×1440" con relación de píxeles 2× significa que el viewport CSS es de 1280×720 píxeles.

Esta herramienta lee las APIs de Pantalla y Ventana de tu navegador para mostrar tu resolución actual, dimensiones del viewport, relación de píxeles del dispositivo (DPR), profundidad de color y orientación.

Casos de uso

• Depuración HiDPI: si las imágenes se ven borrosas en un MacBook Pro, comprueba el DPR — típicamente es 2. Las imágenes deben servirse al 2× de su tamaño CSS para aparecer nítidas en pantallas Retina.
• Prueba de puntos de ruptura responsivos: comprueba el ancho actual de tu viewport en píxeles para verificar que los puntos de ruptura CSS se activan en los tamaños correctos.
• Verificación de QA: cuando un cliente reporta un bug de diseño "en móvil", obtén las dimensiones exactas de su dispositivo usando esta herramienta.

Preguntas frecuentes

¿Qué es la relación de píxeles del dispositivo (DPR)?

DPR es la relación entre píxeles físicos y píxeles CSS. DPR de 2 (Retina, HiDPI) significa 4 píxeles físicos por píxel CSS. Las imágenes a 100px de ancho CSS necesitan ser de 200px para verse nítidas. Usa `window.devicePixelRatio` en JavaScript.

¿Cuál es la diferencia entre resolución de pantalla y tamaño del viewport?

La resolución de pantalla es la resolución completa del monitor en píxeles CSS. El tamaño del viewport es el área visible del navegador, excluyendo barras de herramientas. Las media queries usan las dimensiones del viewport.

¿Qué es la profundidad de color?

24 bits (8 bits para cada R, G, B) es el estándar para la mayoría de pantallas, admitiendo 16,7 millones de colores. Para diseño web, la profundidad de color raramente importa.

¿Cómo pruebo diferentes tamaños de pantalla sin un dispositivo real?

Las devtools del navegador (F12) → Toggle Device Toolbar permiten simular cualquier tamaño de viewport y DPR, incluyendo presets para iPhone, iPad, Pixel, Galaxy.

Utilidades

Generador de contraseñas · Generador de código QR · Cronómetro · Temporizador · Calculadora · Generador de números aleatorios