¿Qué es la información de pantalla y viewport?
Todo navegador expone un objeto screen y un viewport. screen.width y screen.height indican la pantalla en píxeles CSS; innerWidth e innerHeight, el viewport visible sin barras. devicePixelRatio dice cuántos puntos físicos equivalen a un píxel CSS y colorDepth, cuántos bits describen cada píxel.
Ejemplo: un portátil con panel físico de 2560x1600 y devicePixelRatio 2 informa screen.width=1280 y screen.height=800 píxeles CSS, justo el tamaño que usarías en una media query. colorDepth 24 significa 8 bits por canal, es decir 2^24 = 16.777.216 colores. Si innerWidth es mayor que innerHeight, el dispositivo está en horizontal; intercámbialos y estará en vertical.
Cómo leer el informe de pantalla
- Abre la página: la herramienta lee los valores del navegador al instante y no sube nada.
- Compara el tamaño de pantalla con el de la ventana para ver cuánto ocupan las barras.
- Revisa la relación de píxeles para decidir si los gráficos necesitan variantes Retina.
- Observa cómo los valores se actualizan en vivo al redimensionar la ventana o girar el dispositivo.
Pantalla y viewport — preguntas frecuentes
¿Cuál es la diferencia entre el tamaño de pantalla y el de ventana?
screen.width indica toda la pantalla en píxeles CSS, mientras que innerWidth solo el viewport visible, que las barras y paneles reducen. Las media queries reaccionan al viewport, no a la pantalla.
¿Qué significa la relación de píxeles del dispositivo?
Es el número de píxeles físicos por píxel CSS. Una relación de 2 (habitual en Retina y muchos móviles) significa que un borde de 10px se dibuja con 20 píxeles físicos, así que las imágenes deben entregarse a 2x.
¿Por qué la profundidad de color suele ser 24 o 30?
24 bits son 8 bits por canal rojo, verde y azul: 16.777.216 colores. Los paneles de 30 bits (10 por canal) dan degradados más finos para HDR, pero el navegador o el controlador pueden limitar el valor informado.
