Tailles de viewport iPhone : pixels CSS, DPR et résolution
Trouvez largeur et hauteur CSS, DPR, résolution physique et année de chaque iPhone, dont iPhone 17, 16, 15, SE, Pro et Pro Max. Utilisez le tableau pour les breakpoints, la QA responsive et les tests par appareil.
État des données : Dernière mise à jour : 2026-02-08 (UTC)
Sources : Pages de spécifications officielles Apple, Google et Samsung
Méthode : Les valeurs iPhone et iPad sont principalement la résolution divisée par le DPR. Le viewport CSS et le DPR Android peuvent varier selon la mise à l'échelle de l'affichage, l'interface du navigateur et les paramètres système.
Réponse rapide : Commencez par les iPhone les plus récents en haut du tableau, puis comparez viewport CSS, DPR, résolution physique et année avant de définir vos breakpoints responsive.
Tableau des tailles de viewport
| Modèle | Taille du viewport | Résolution d'écran | DPR | Année de sortie |
|---|---|---|---|---|
| iPhone 17 Pro Max | 440 × 956 | 1320 × 2868 | 3 | 2025 |
| iPhone 17 Pro | 402 × 874 | 1206 × 2622 | 3 | 2025 |
| iPhone 17 Air | 420 × 912 | 1260 × 2736 | 3 | 2025 |
| iPhone 17 | 402 × 874 | 1206 × 2622 | 3 | 2025 |
| iPhone 16e | 390 × 844 | 1170 × 2532 | 3 | 2025 |
| iPhone 16 Pro Max | 430 × 932 | 1290 × 2796 | 3 | 2024 |
| iPhone 16 Pro | 393 × 852 | 1179 × 2556 | 3 | 2024 |
| iPhone 16 Plus | 428 × 926 | 1284 × 2778 | 3 | 2024 |
| iPhone 16 | 390 × 844 | 1170 × 2532 | 3 | 2024 |
| iPhone 15 Pro Max | 430 × 932 | 1290 × 2796 | 3 | 2023 |
| iPhone 15 Pro | 393 × 852 | 1179 × 2556 | 3 | 2023 |
| iPhone 15 Plus | 428 × 926 | 1284 × 2778 | 3 | 2023 |
| iPhone 15 | 390 × 844 | 1170 × 2532 | 3 | 2023 |
| iPhone 14 Pro Max | 430 × 932 | 1290 × 2796 | 3 | 2022 |
| iPhone 14 Pro | 393 × 852 | 1179 × 2556 | 3 | 2022 |
| iPhone 14 Plus | 428 × 926 | 1284 × 2778 | 3 | 2022 |
| iPhone 14 | 390 × 844 | 1170 × 2532 | 3 | 2022 |
| iPhone SE (3rd generation) | 375 × 667 | 750 × 1334 | 2 | 2022 |
| iPhone 13 Pro Max | 428 × 926 | 1284 × 2778 | 3 | 2021 |
| iPhone 13 Pro | 390 × 844 | 1170 × 2532 | 3 | 2021 |
| iPhone 13 | 390 × 844 | 1170 × 2532 | 3 | 2021 |
| iPhone 13 mini | 375 × 812 | 1080 × 2340 | 3 | 2021 |
| iPhone 12 Pro Max | 428 × 926 | 1284 × 2778 | 3 | 2020 |
| iPhone 12 Pro | 390 × 844 | 1170 × 2532 | 3 | 2020 |
| iPhone 12 | 390 × 844 | 1170 × 2532 | 3 | 2020 |
| iPhone 12 mini | 375 × 812 | 1080 × 2340 | 3 | 2020 |
Comprendre les tailles de viewport
Bases du viewport
Lors de la conception pour les appareils, il est important de comprendre la différence entre les tailles de viewport et les résolutions d'écran :
- Taille du viewport : La zone visible en pixels CSS que votre site peut utiliser
- Résolution d'écran : Le nombre réel de pixels physiques de l'appareil
- Ratio pixels/appareil (DPR) : Le rapport entre les pixels physiques et les pixels CSS
Considérations de design
- Prenez en compte les différentes tailles et densités d'écran
- Considérez les différents rapports d'aspect
- Optimisez pour les différentes orientations
- Testez sur plusieurs appareils
- Pensez aux appareils pliables et à double écran
Mise en œuvre technique
- Utilisez les balises meta viewport correctement
- Utilisez les media queries CSS efficacement
- Prenez en compte les zones de sécurité (safe area insets)
- Optimisez pour les différentes valeurs de DPR
Questions fréquentes sur les viewports des appareils
La taille du viewport est la zone en pixels CSS utilisée par votre mise en page, tandis que la résolution d'écran est le nombre de pixels physiques de l'appareil. Ils sont liés par le DPR, mais l'interface du navigateur et la mise à l'échelle peuvent modifier le viewport effectif.
Des valeurs de DPR différentes, la mise à l'échelle de l'affichage système et le comportement du navigateur peuvent produire des largeurs de viewport CSS différentes même quand les résolutions physiques sont proches.
Utilisez ce tableau comme référence pour les appareils réels courants, puis définissez des points de rupture flexibles selon le comportement du contenu, pas selon des modèles spécifiques. Testez les plages clés comme 360, 390, 412, 768, 820, 834 et 1024 pixels CSS.
Les pliables peuvent basculer entre l'écran de couverture et l'écran principal avec des rapports de viewport très différents. Testez les deux états et la rotation, et évitez de coder en dur les mises en page pour une seule largeur exacte.
Nous mettons à jour ces données après les lancements majeurs d'appareils et les changements de spécifications. Vérifiez toujours les cas critiques de production sur de vrais appareils ou des laboratoires de test cloud.