Comprobador de resolución de pantalla
El viewport de tu navegador se actualiza en directo mientras redimensionas la ventana, además de la resolución de pantalla, la densidad de píxeles, la orientación y la profundidad de color.
El viewport y la resolución de pantalla no son lo mismo
La resolución de tu pantalla es el tamaño total del monitor (por ejemplo 1920×1080), mientras que el viewport es solo la zona en la que el navegador dibuja realmente la página: no incluye la barra de direcciones, las pestañas ni las barras del sistema, y se encoge cada vez que la ventana no está a pantalla completa. Al crear una web responsive, las media queries de CSS miran el viewport — no la pantalla —, y por eso esta página lo muestra en directo mientras redimensionas la ventana. Es el número que decide si tus visitantes ven el diseño de escritorio o el móvil.
¿Qué significa la densidad de píxeles (device pixel ratio)?
En las pantallas de alta densidad (pantallas Retina, casi todos los móviles modernos) cada píxel CSS se dibuja usando varios píxeles físicos: una densidad de 2 significa 4 píxeles reales por cada uno lógico. Por eso un móvil con un panel de 1170×2532 puede declarar un viewport de apenas 390 píxeles de ancho. El valor importa mucho si preparas imágenes para la web: para verse nítida en una pantalla con densidad 2, una imagen mostrada a 300 píxeles CSS de ancho debería tener al menos 600 píxeles reales de ancho.