Base d'appareils · 168 modèles · 18 marques

Tous les appareils : viewport CSS, densité et résolution d'écran

Smartphones, tablettes, ordinateurs et montres connectées, avec pour chacun la largeur sur laquelle raisonnent vos media queries, sa densité de pixel et la résolution de sa dalle. 77 de ces appareils se testent directement dans votre navigateur.

Un iPhone, un Pixel, un iPad et un smartphone Android affichant chacun un site web dans le simulateur Mobile FIRST

Appareils par marque

18 marques · 168 modèles

Chaque modèle mène à sa fiche : viewport CSS, densité de pixel, résolution constructeur, diagonale, User-Agent et media queries prêtes à copier. La recherche filtre sur le nom, la marque, la largeur en pixels ou l'année.

168 appareils affichés

Smartphones Samsung 53 modèles

Tablettes et ordinateurs Samsung 3 modèles

Tous les appareils Samsung →

Smartphones Apple 41 modèles

Tablettes, ordinateurs et montres connectées Apple 8 modèles

Tous les appareils Apple →

Google 17 modèles

Tous les appareils Google →

OnePlus 11 modèles

Tous les appareils OnePlus →

Huawei 9 modèles

Tous les appareils Huawei →

Xiaomi 6 modèles

Tous les appareils Xiaomi →

Honor 4 modèles

Appareils génériques 2 modèles

HTC 2 modèles

Motorola 2 modèles

Sony 2 modèles

Zebra 2 modèles

Dell 1 modèle

Infinix 1 modèle

LG 1 modèle

Microsoft 1 modèle

OPPO 1 modèle

Sonoff 1 modèle

Derniers appareils ajoutés

Mis à jour à chaque sortie

Les largeurs de viewport les plus courantes

Six largeurs couvrent l'essentiel du parc mobile. Ce sont elles qu'il faut vérifier en priorité avant de multiplier les points de rupture dans votre feuille de style.

Largeurs de viewport CSS les plus représentées, avec leurs modèles types et leurs densités de pixel
Largeur CSS Appareils représentatifs Densité Modèles concernés
360 px Infinix Hot 70Samsung Galaxy S24 (2024)Samsung Galaxy S22 (2022) 2x, 3x, 4x 54 modèles
375 px Apple iPhone 13 Mini (2021)Apple iPhone SE (2020)Apple iPhone 11 Pro 2x, 3x 8 modèles
390 px Apple iPhone 14 (2022)Apple iPhone 14 PRO (2022)Apple iPhone 13 (2021) 3x 6 modèles
393 px Apple iPhone 16 (2024)Apple iPhone 15 (2023)Apple iPhone 15 PRO (2023) 2.75x, 3x 12 modèles
412 px Galaxy S26 ULTRAGoogle Pixel 10Motorola Razr 70 Ultra 2.625x, 3x, 3.5x, 4x 40 modèles
414 px Apple iPhone 11Apple iPhone 11 Pro MaxApple iPhone XR 2x, 3x, 3.5x 9 modèles

Tester son site sur un appareil réel, sans l'acheter

Trois étapes, une trentaine de secondes, aucun compte à créer.

  1. 01 Installez l'extension Elle s'ajoute à Chrome, Edge, Firefox, Safari ou Opera en un clic, sans compte à créer.
  2. 02 Choisissez l'appareil 77 modèles sont prêts à l'emploi, avec leur viewport CSS exact, leur densité de pixel et leur User-Agent.
  3. 03 Ouvrez votre site à côté Le rendu s'affiche dans le cadre de l'appareil, y compris sur une adresse en localhost, et vous en exportez une capture ou une vidéo.

Comment lire les caractéristiques d'un appareil

Le viewport CSS est la seule des trois mesures que votre feuille de style manipule. C'est la largeur à laquelle vos breakpoints se comparent, celle qui décide du nombre de colonnes affichées et de la version d'image servie. Un iPhone 16 annoncé en 1179 pixels par son constructeur travaille en réalité sur 393 pixels CSS : c'est cette seconde valeur qu'il faut écrire dans une media query.

La densité de pixel, ou device pixel ratio, est le rapport entre les deux. À 3x, chaque pixel CSS est rendu par neuf pixels physiques : une image exportée à sa taille d'affichage y paraîtra adoucie, et il faut en fournir une version deux ou trois fois plus grande. La résolution constructeur, elle, ne sert qu'à préparer ces exports et à lire les statistiques d'audience, jamais à écrire du CSS.

La diagonale et le ratio complètent le tableau : deux appareils au même viewport peuvent avoir une hauteur très différente, ce qui change tout pour un menu collant ou une bannière en pied de page. C'est pourquoi chaque fiche donne aussi la liste des modèles au format strictement identique : valider l'un d'eux suffit à valider les autres.

Questions fréquentes

Qu'est-ce que le viewport CSS d'un appareil ?

C'est la largeur, en pixels CSS, de la zone d'affichage du navigateur sur cet appareil. C'est la valeur à laquelle vos media queries se comparent, et elle est presque toujours plus petite que la résolution annoncée par le constructeur.

Quelle différence entre viewport CSS et résolution d'écran ?

La résolution est le nombre de pixels physiques de la dalle, le viewport CSS est la largeur logique sur laquelle travaille votre feuille de style. Le rapport entre les deux est la densité de pixel : un écran de 1179 pixels en densité 3x offre 393 pixels CSS.

Quelles largeurs faut-il viser pour ses breakpoints ?

Sur les 168 appareils référencés, les largeurs les plus représentées sont 360 px, 412 px, 393 px. Les vérifier en premier couvre la majorité du parc mobile avant d'ajouter des points de rupture plus fins.

Comment tester son site sur ces appareils ?

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

La liste est-elle à jour ?

Oui. Le catalogue compte 168 modèles répartis sur 18 marques, et il est enrichi à chaque sortie de nouvel appareil.

Testez votre site sur 77 de ces appareils, sans en acheter un seul

Le tableau donne les mesures. L'extension affiche votre site au viewport exact de l'appareil, avec son User-Agent et ses événements tactiles.

  • 77 appareils 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
Installer pour Chrome Installer pour Firefox

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