17 dispositivos · Smartphones
Las características de visualización de los 17 dispositivos Google referenciados, con para cada uno el ancho sobre el cual resuenan tus media queries, su densidad de píxel y la resolución de su pantalla. 6 de estos dispositivos se prueban directamente en tu navegador.
5 anchos CSS distintos cubren toda la gama: 360, 393, 410, 411 y 412 px. Varios modelos comparten el mismo: validar uno de ellos es suficiente para validar los demás.
| Modelo | Viewport CSS | Densidad | Resolución de pantalla | Diagonal | Año |
|---|---|---|---|---|---|
| Google Pixel 10 | 412 × 924 | 2.625x | 1082 × 2426 | — | 2026 |
| Google Pixel 10 PRO | 410 × 912 | 3.125x | 1281 × 2850 | — | 2026 |
| Pixel 10 Fold plegado | 412 × 901 | 2.625x | 1082 × 2365 | — | 2026 |
| Google Pixel 8 | 412 × 915 | 2.625x | 1080 × 2400 | — | 2024 |
| Google Pixel 6 PRO | 360 × 780 | 4x | 1440 × 3120 | 6,7" | 2021 |
| Google Pixel 4a | 393 × 851 | 2.75x | 1080 × 2340 | 5,8" | 2020 |
| Google Pixel 5 | 393 × 851 | 2.75x | 1080 × 2340 | 6" | 2020 |
| Google Pixel 3a | 393 × 808 | 2.75x | 1080 × 2220 | 5,6" | 2019 |
| Google Pixel 3a XL | 412 × 823 | 2.625x | 1080 × 2160 | 6" | 2019 |
| Google Pixel 4 | 393 × 830 | 2.75x | 1080 × 2280 | 5,7" | 2019 |
| Google Pixel 4 XL | 412 × 869 | 3.5x | 1440 × 3040 | 6,3" | 2019 |
| Google Pixel 3 | 393 × 786 | 2.75x | 1080 × 2160 | 5,5" | 2018 |
| Google Pixel 3 XL | 412 × 846 | 3.5x | 1440 × 2960 | 6,3" | 2018 |
| Google Pixel 2 | 412 × 732 | 2.625x | 1080 × 1920 | 5" | 2017 |
| Google Pixel 2 XL | 412 × 823 | 3.5x | 1440 × 2880 | 6" | 2017 |
| Google Pixel | 411 × 731 | 2.6x | 1080 × 1920 | 5" | 2016 |
| Google Pixel XL | 412 × 732 | 3.5x | 1440 × 2560 | 5,5" | 2016 |
Los anchos más representados de la gama son 360, 393, 410 y 412 px. Verificarlos primero cubre 16 de los 17 modelos Google referenciados, y es sobre ellos que deben caer tus primeros puntos de ruptura.
Descienda hasta 360 px para cubrir toda la gama, incluido Google Pixel 6 PRO: un diseño que se ajusta a este ancho se ajusta en todas partes, incluidos los modelos más antiguos aún en circulación.
Atención a la altura: los navegadores móviles reducen el área visible con sus barras de interfaz, y estas se retraen al desplazarse. Una altura en 100vh desborda por lo tanto de la primera pantalla; las unidades svh y dvh son preferibles.
Las tablas dan las medidas. La extensión muestra tu sitio en el viewport exacto del modelo, con su densidad, su User-Agent y el cambio de retrato a paisaje.
Gratis · 4,9/5 sobre 5100 opiniones
1.500.000+ usuarios
412 x 924 px, compartido por 9 de los 17 modelos referenciados, incluyendo Google Pixel 10 y Pixel 10 Fold plegado. Es el ancho a verificar primero en esta gama.
360 px, el ancho del modelo más estrecho de la lista, Google Pixel 6 PRO. Si su diseño se ajusta a 360 px, se ajusta a los 17 dispositivos Google referenciados, hasta el más ancho que alcanza 412 px.
Porque estas pantallas muestran varios píxeles físicos por píxel CSS. Google Pixel 10 tiene una pantalla de 1082 x 2426 píxeles y un viewport CSS de 412 x 924 px, es decir, una densidad de 2.625. Es el segundo valor que se debe escribir en una media query.
Con la extensión Mobile FIRST: reproduce el viewport, la densidad de píxel, el User-Agent y los eventos táctiles de 6 de estos modelos, directamente en su navegador, incluso en una dirección en localhost.
Las marcas y modelos mencionados pertenecen a sus respectivos propietarios.