Todos los dispositivos: viewport CSS, densidad y resolución de pantalla

Es el ancho, en píxeles CSS, de la zona de visualización del navegador en este dispositivo. Es el valor al que se comparan sus media queries, y casi siempre es más pequeño que la resolución anunciada por el fabricante.

La resolución es el número de píxeles físicos de la pantalla, el viewport CSS es el ancho lógico sobre el que trabaja su hoja de estilo. La relación entre los dos es la densidad de píxel: una pantalla de 1179 píxeles en densidad 3x ofrece 393 píxeles CSS.

En los 172 dispositivos referenciados, los anchos más representados son 360 px, 412 px, 393 px. Verificarlos primero cubre la mayoría del parque móvil antes de agregar puntos de ruptura más finos.

Porque tiene dos viewports. La pantalla externa y la pantalla interna no comparten ni el ancho, ni el alto, ni la proporción: un diseño validado plegado no lo está desplegado, y el dispositivo pasa de uno a otro durante la navegación. Por eso cada estado tiene su propia ficha y sus propias media queries.

Con la extensión Mobile FIRST: reproduce el viewport, la densidad de píxel, el User-Agent y los eventos táctiles de 81 de estos modelos, directamente en su navegador, incluso en una dirección en localhost.

Sí. El catálogo cuenta con 172 modelos distribuidos en 18 marcas, y se enriquece con cada lanzamiento de un nuevo dispositivo.