Les iPhone actuels ont des écrans de 6,1 à 6,9 pouces, avec des viewports CSS de 390 à 440 pixels de large. L’iPhone 18 Pro et l’iPhone 17 ont un écran de 6,3 pouces et un viewport de 402 × 874 ; l’iPhone 18 Pro Max et le 17 Pro Max, un écran de 6,9 pouces et un viewport de 440 × 956 ; l’iPhone 17e, un écran de 6,1 pouces et un viewport de 390 × 844. Le tableau ci-dessous reprend tous les modèles jusqu’au premier iPhone SE.
Comment lire le tableau
- Écran : la diagonale en pouces, telle qu’Apple l’indique. Sur les modèles à coins arrondis, la surface réellement visible est un peu plus petite.
- Résolution : le nombre de pixels physiques de l’écran, en portrait.
- Viewport CSS : ce que voit une page web dans Safari en portrait avec une balise meta viewport correcte, soit la résolution divisée par la densité de pixels. C’est la valeur à utiliser pour le responsive design et les media queries.
- Densité de pixels (DPR) : le nombre de pixels physiques qui composent un pixel CSS dans chaque direction.
Tableau des tailles d’écran iPhone (2016–2026)
| Modèle | Année | Écran | Résolution | Viewport CSS | Densité de pixels |
|---|---|---|---|---|---|
| iPhone 18 Pro Max | 2026 | 6,9” | 1320 × 2868 | 440 × 956 | 3 |
| iPhone 18 Pro | 2026 | 6,3” | 1206 × 2622 | 402 × 874 | 3 |
| iPhone 17e | 2026 | 6,1” | 1170 × 2532 | 390 × 844 | 3 |
| iPhone 17 Pro Max | 2025 | 6,9” | 1320 × 2868 | 440 × 956 | 3 |
| iPhone 17 Pro | 2025 | 6,3” | 1206 × 2622 | 402 × 874 | 3 |
| iPhone Air | 2025 | 6,5” | 1260 × 2736 | 420 × 912 | 3 |
| iPhone 17 | 2025 | 6,3” | 1206 × 2622 | 402 × 874 | 3 |
| iPhone 16e | 2025 | 6,1” | 1170 × 2532 | 390 × 844 | 3 |
| iPhone 16 Pro Max | 2024 | 6,9” | 1320 × 2868 | 440 × 956 | 3 |
| iPhone 16 Pro | 2024 | 6,3” | 1206 × 2622 | 402 × 874 | 3 |
| iPhone 16 Plus | 2024 | 6,7” | 1290 × 2796 | 430 × 932 | 3 |
| iPhone 16 | 2024 | 6,1” | 1179 × 2556 | 393 × 852 | 3 |
| iPhone 15 Pro Max | 2023 | 6,7” | 1290 × 2796 | 430 × 932 | 3 |
| iPhone 15 Pro | 2023 | 6,1” | 1179 × 2556 | 393 × 852 | 3 |
| iPhone 15 Plus | 2023 | 6,7” | 1290 × 2796 | 430 × 932 | 3 |
| iPhone 15 | 2023 | 6,1” | 1179 × 2556 | 393 × 852 | 3 |
| iPhone 14 Pro Max | 2022 | 6,7” | 1290 × 2796 | 430 × 932 | 3 |
| iPhone 14 Pro | 2022 | 6,1” | 1179 × 2556 | 393 × 852 | 3 |
| iPhone 14 Plus | 2022 | 6,7” | 1284 × 2778 | 428 × 926 | 3 |
| iPhone 14 | 2022 | 6,1” | 1170 × 2532 | 390 × 844 | 3 |
| iPhone SE (3e génération) | 2022 | 4,7” | 750 × 1334 | 375 × 667 | 2 |
| iPhone 13 Pro Max | 2021 | 6,7” | 1284 × 2778 | 428 × 926 | 3 |
| iPhone 13 / 13 Pro | 2021 | 6,1” | 1170 × 2532 | 390 × 844 | 3 |
| iPhone 13 mini | 2021 | 5,4” | 1080 × 2340 | 375 × 812 | 3 |
| iPhone 12 Pro Max | 2020 | 6,7” | 1284 × 2778 | 428 × 926 | 3 |
| iPhone 12 / 12 Pro | 2020 | 6,1” | 1170 × 2532 | 390 × 844 | 3 |
| iPhone 12 mini | 2020 | 5,4” | 1080 × 2340 | 375 × 812 | 3 |
| iPhone SE (2e génération) | 2020 | 4,7” | 750 × 1334 | 375 × 667 | 2 |
| iPhone 11 Pro Max | 2019 | 6,5” | 1242 × 2688 | 414 × 896 | 3 |
| iPhone 11 Pro | 2019 | 5,8” | 1125 × 2436 | 375 × 812 | 3 |
| iPhone 11 | 2019 | 6,1” | 828 × 1792 | 414 × 896 | 2 |
| iPhone XS Max | 2018 | 6,5” | 1242 × 2688 | 414 × 896 | 3 |
| iPhone XS | 2018 | 5,8” | 1125 × 2436 | 375 × 812 | 3 |
| iPhone XR | 2018 | 6,1” | 828 × 1792 | 414 × 896 | 2 |
| iPhone X | 2017 | 5,8” | 1125 × 2436 | 375 × 812 | 3 |
| iPhone 8 Plus | 2017 | 5,5” | 1080 × 1920 | 414 × 736 | 3* |
| iPhone 8 | 2017 | 4,7” | 750 × 1334 | 375 × 667 | 2 |
| iPhone 7 Plus | 2016 | 5,5” | 1080 × 1920 | 414 × 736 | 3* |
| iPhone 7 | 2016 | 4,7” | 750 × 1334 | 375 × 667 | 2 |
| iPhone SE (1re génération) | 2016 | 4,0” | 640 × 1136 | 320 × 568 | 2 |
* Les modèles Plus effectuent le rendu en 1 242 × 2 208 puis le réduisent sur une dalle de 1 080 × 1 920 : la densité annoncée est de 3 alors que la densité physique est d’environ 2,6. Les iPhone 12 mini et 13 mini affichent de même un viewport de 375 px sur une dalle un peu plus petite que ce qu’exigerait un facteur 3.
Sources : les fiches techniques d’Apple pour chaque modèle (taille d’écran et résolution) ; les valeurs de viewport correspondent à la résolution divisée par la densité de pixels. Consultez la fiche technique d’Apple pour les modèles les plus récents, ajoutés chaque année.
Les largeurs de viewport dont les webdesigners ont vraiment besoin
Parmi tous ces modèles, seules quelques largeurs comptent pour la mise en page :
| Largeur CSS | Modèles |
|---|---|
| 375 px | SE (2e et 3e génération), 8, modèles mini, X/XS/11 Pro |
| 390 px | 12, 13, 14, 16e, 17e |
| 393 px | 14 Pro, 15, 15 Pro, 16 |
| 402 px | 16 Pro, 17, 17 Pro, 18 Pro |
| 414 px | XR, 11, XS Max, 11 Pro Max, 8 Plus |
| 420 px | Air |
| 428–440 px | Modèles Plus et Pro Max |
Si votre mise en page s’adapte de façon fluide de 375 à 440 px, elle fonctionne sur tous les iPhone vendus ces huit dernières années. Testez aussi 320 px pour être tranquille avec les anciens appareils et le texte agrandi. Pour tout ce qui se situe entre et au-delà des téléphones, voir les breakpoints responsive.
Quel iPhone a le plus grand et le plus petit écran ?
Les plus grands écrans d’iPhone sont ceux des Pro Max de 6,9 pouces : iPhone 16 Pro Max, 17 Pro Max et 18 Pro Max. Le plus petit écran de la génération actuelle mesure 6,1 pouces (iPhone 16e et 17e). Le plus petit iPhone au design bord à bord moderne était l’iPhone 13 mini de 5,4 pouces, et le plus petit de ce tableau reste le premier iPhone SE de 4 pouces.
Utiliser ces tailles pour tester un site
Pour voir votre site à la taille exacte d’un iPhone sur ordinateur, il faut le viewport et la densité de pixels et le user agent, pas seulement une fenêtre étroite. Deux options :
- Le mode appareil de Chrome DevTools : choisissez un préréglage iPhone, ou cliquez sur Edit et ajoutez un appareil personnalisé avec la largeur, la hauteur et la densité de pixels du tableau. Voir le guide de l’émulateur mobile Chrome.
- Une extension d’affichage mobile avec des préréglages iPhone. Mobile View Extension recharge l’onglet dans un cadre d’iPhone avec le user agent, la taille d’écran et la densité de pixels correspondants, et accepte des résolutions personnalisées si un modèle manque.
Les deux utilisent le moteur de Chrome. Pour le comportement propre à Safari, utilisez le simulateur Xcode ou un vrai iPhone, comme expliqué dans comment tester un site sur iPhone sans iPhone.
Questions fréquentes
Quelle est la taille du viewport de l’iPhone 17 ?
402 × 874 pixels CSS avec une densité de 3, pour un écran de 6,3 pouces en 1 206 × 2 622 pixels. L’iPhone 17 Pro et l’iPhone 18 Pro ont les mêmes valeurs.
Pour quelle taille d’écran concevoir sur iPhone ?
Concevez des mises en page fluides qui fonctionnent de 375 à 440 px de large. Prenez 390 ou 393 px comme iPhone moyen dans vos maquettes, et vérifiez 375 et 440 px avant la mise en ligne.
Pourquoi le viewport de l’iPhone est-il plus petit que sa résolution ?
Chaque pixel CSS est dessiné avec deux ou trois pixels physiques par côté pour garder un texte net. Le viewport correspond à la résolution divisée par cette densité. Plus de détails dans qu’est-ce que le viewport.