17 appareils · Smartphones

Appareils Google : viewport CSS, densité et résolution d'écran

Les caractéristiques d'affichage des 17 appareils Google référencés, avec pour chacun la largeur sur laquelle raisonnent vos media queries, sa densité de pixel et la résolution de sa dalle. 6 de ces appareils se testent directement dans votre navigateur.

Smartphones Google

17 modèles · 2016 → 2026

5 largeurs CSS distinctes couvrent toute la gamme : 360, 393, 410, 411 et 412 px. Plusieurs modèles partagent la même : valider l'un d'eux suffit à valider les autres.

Viewport CSS, densité de pixel, résolution et diagonale des appareils Google
Modèle Viewport CSS Densité Résolution dalle Diagonale Année
Google Pixel 10 412 × 924 2.625x 1082 × 2426 2026
Google Pixel 10 PRO 410 × 912 3.125x 1281 × 2850 2026
Pixel 10 Fold (Unfolded) 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

Quelles largeurs tester en priorité

Les largeurs les plus représentées de la gamme sont 360, 393, 410 et 412 px. Les vérifier en premier couvre 16 des 17 modèles Google référencés, et c'est sur elles que doivent tomber vos premiers points de rupture.

Descendez jusqu'à 360 px pour couvrir la gamme entière, Google Pixel 6 PRO comprise : une mise en page qui tient à cette largeur tient partout, y compris sur les modèles les plus anciens encore en circulation.

Attention à la hauteur : les navigateurs mobiles réduisent la zone visible avec leurs barres d'interface, et celles-ci se rétractent au défilement. Une hauteur en 100vh déborde donc du premier écran ; les unités svh et dvh sont préférables.

Testez votre site sur 6 appareils Google, sans en acheter un seul

Les tableaux donnent les mesures. L'extension affiche votre site au viewport exact du modèle, avec sa densité, son User-Agent et le basculement portrait ou paysage.

  • 6 appareils Google prêts à l'emploi, des modèles anciens aux sorties de l'année
  • Captures et vidéos exportées au format de l'appareil
  • Fonctionne sur vos environnements locaux et vos préproductions

Gratuit · 4,9/5 sur 5 100 avis
1 500 000+ utilisateurs

Questions fréquentes

Quel est le viewport CSS le plus courant chez Google ?

412 x 924 px, partagé par 9 des 17 modèles référencés, dont Google Pixel 10 et Pixel 10 Fold (Unfolded). C'est la largeur à vérifier en premier sur cette gamme.

Quelle largeur minimale tester pour couvrir les appareils Google ?

360 px, la largeur du modèle le plus étroit de la liste, Google Pixel 6 PRO. Si votre mise en page tient à 360 px, elle tient sur les 17 appareils Google référencés, jusqu'au plus large qui atteint 412 px.

Pourquoi la résolution annoncée par Google ne correspond pas au viewport CSS ?

Parce que ces écrans affichent plusieurs pixels physiques par pixel CSS. Google Pixel 10 a une dalle de 1082 x 2426 pixels et un viewport CSS de 412 x 924 px, soit une densité de 2.625. C'est la seconde valeur qu'il faut écrire dans une media query.

Comment tester son site sur un appareil Google sans en avoir un ?

Avec l'extension Mobile FIRST : elle reproduit le viewport, la densité de pixel, le User-Agent et les événements tactiles de 6 de ces modèles, directement dans votre navigateur, y compris sur une adresse en localhost.

Les marques et modèles cités appartiennent à leurs propriétaires respectifs.