17 dispositivos · Smartphones
Dispositivos Google: viewport CSS, densidade e resolução de tela
As características de exibição dos 17 dispositivos Google referenciados, com a largura na qual suas media queries ressoam, sua densidade de pixel e a resolução de sua tela. 6 desses dispositivos podem ser testados diretamente no seu navegador.
Smartphones Google
5 larguras CSS distintas cobrem toda a gama: 360, 393, 410, 411 e 412 px. Vários modelos compartilham a mesma: validar um deles é suficiente para validar os outros.
| Modelo | Viewport CSS | Densidade | Resolução da tela | Diagonal | Ano |
|---|---|---|---|---|---|
| Google Pixel 10 | 412 × 924 | 2.625x | 1082 × 2426 | — | 2026 |
| Google Pixel 10 PRO | 410 × 912 | 3.125x | 1281 × 2850 | — | 2026 |
| Pixel 10 Fold dobrado | 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 |
Quais larguras testar em prioridade
As larguras mais representadas da gama são 360, 393, 410 e 412 px. Verificá-las primeiro cobre 16 dos 17 modelos Google referenciados, e é sobre elas que seus primeiros breakpoints devem incidir.
Desça até 360 px para cobrir toda a gama, incluindo Google Pixel 6 PRO: um layout que se adapta a essa largura se adapta em qualquer lugar, inclusive nos modelos mais antigos ainda em circulação.
Atenção à altura: os navegadores móveis reduzem a área visível com suas barras de interface, e estas se retraem ao rolar. Uma altura de 100vh, portanto, transborda da primeira tela; as unidades svh e dvh são preferíveis.
Teste seu site em 6 dispositivos Google, sem comprar nenhum
As tabelas fornecem as medidas. A extensão exibe seu site no viewport exato do modelo, com sua densidade, seu User-Agent e a alternância entre retrato e paisagem.
- 6 dispositivos Google prontos para uso, desde modelos antigos até os lançamentos do ano
- Capturas e vídeos exportados no formato do dispositivo
- Funciona nos seus ambientes locais e suas pré-produções
Grátis · 4,9/5 em 5.100 avaliações
1.500.000+ usuários
Outras marcas
Perguntas frequentes
Qual é o viewport CSS mais comum na Google?
412 x 924 px, compartilhado por 9 dos 17 modelos referenciados, incluindo Google Pixel 10 e Pixel 10 Fold dobrado. É a largura a verificar primeiro nesta gama.
Qual largura mínima testar para cobrir os dispositivos Google?
360 px, a largura do modelo mais estreito da lista, Google Pixel 6 PRO. Se o seu layout cabe em 360 px, ele cabe nos 17 dispositivos Google referenciados, até o mais largo que atinge 412 px.
Por que a resolução anunciada pela Google não corresponde ao viewport CSS?
Porque essas telas exibem vários pixels físicos por pixel CSS. Google Pixel 10 tem uma tela de 1082 x 2426 pixels e um viewport CSS de 412 x 924 px, com uma densidade de 2.625. É o segundo valor que deve ser escrito em uma media query.
Como testar seu site em um dispositivo Google sem ter um?
Com a extensão Mobile FIRST: ela reproduz o viewport, a densidade de pixel, o User-Agent e os eventos táteis de 6 desses modelos, diretamente no seu navegador, inclusive em um endereço localhost.
As marcas e modelos citados pertencem aos seus respectivos proprietários.