49 appareils · Smartphones, tablettes, ordinateurs et montres connectées
Appareils Apple : viewport CSS, densité et résolution d'écran
Les caractéristiques d'affichage des 49 appareils Apple 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. 39 de ces appareils se testent directement dans votre navigateur.
Smartphones Apple
11 largeurs CSS distinctes couvrent toute la gamme : 320, 360, 375, 390, 393, 402, 414, 420, 428, 430 et 440 px. Plusieurs modèles partagent la même : valider l'un d'eux suffit à valider les autres.
| Modèle | Viewport CSS | Densité | Résolution dalle | Diagonale | Année |
|---|---|---|---|---|---|
| Apple iPhone 17 | 402 × 874 | 3x | 1206 × 2622 | 6,3" | 2025 |
| Apple iPhone 17 PRO | 402 × 873 | 3x | 1206 × 2622 | 6,3" | 2025 |
| Apple iPhone 17 PRO MAX | 440 × 956 | 3x | 1320 × 2868 | 6,9" | 2025 |
| Apple iPhone Air | 420 × 912 | 3x | 1260 × 2736 | 6,5" | 2025 |
| Apple iPhone 16 | 393 × 852 | 3x | 1179 × 2556 | 6,1" | 2024 |
| Apple iPhone 16 Plus | 430 × 932 | 3x | 1290 × 2796 | 6,7" | 2024 |
| Apple iPhone 16 PRO MAX | 440 × 956 | 3x | 1320 × 2868 | 6,7" | 2024 |
| Apple iPhone 15 | 393 × 852 | 3x | 1179 × 2556 | 6,1" | 2023 |
| Apple iPhone 15 Plus | 430 × 932 | 3x | 1290 × 2796 | 6,7" | 2023 |
| Apple iPhone 15 PRO | 393 × 852 | 3x | 1179 × 2556 | 6,1" | 2023 |
| Apple iPhone 15 PRO MAX | 430 × 932 | 3x | 1290 × 2796 | 6,7" | 2023 |
| Apple iPhone 14 | 390 × 844 | 3x | 1170 × 2532 | 6,1" | 2022 |
| Apple iPhone 14 Plus | 428 × 926 | 3x | 1284 × 2778 | 6,7" | 2022 |
| Apple iPhone 14 PRO | 390 × 844 | 3x | 1179 × 2556 | 6,1" | 2022 |
| Apple iPhone 14 PRO MAX | 428 × 928 | 3x | 1290 × 2796 | 6,7" | 2022 |
| Apple iPhone 13 | 390 × 844 | 3x | 1170 × 2532 | 6,1" | 2021 |
| Apple iPhone 13 Mini | 375 × 812 | 3x | 1080 × 2340 | 5,4" | 2021 |
| Apple iPhone 13 PRO | 390 × 844 | 3x | 1170 × 2532 | 6,1" | 2021 |
| Apple iPhone 13 PRO MAX | 428 × 926 | 3x | 1284 × 2778 | 6,7" | 2021 |
| Apple iPhone 12 | 390 × 844 | 3x | 1170 × 2532 | 6,1" | 2020 |
| Apple iPhone 12 Mini | 360 × 780 | 3x | 1080 × 2340 | 5,4" | 2020 |
| Apple iPhone 12 Pro | 390 × 844 | 3x | 1170 × 2532 | 6,1" | 2020 |
| Apple iPhone 12 Pro Max | 428 × 926 | 3x | 1284 × 2778 | 6,7" | 2020 |
| Apple iPhone SE | 375 × 667 | 2x | 750 × 1334 | 4,7" | 2020 |
| Apple iPhone 11 | 414 × 896 | 2x | 828 × 1792 | 6,1" | 2019 |
| Apple iPhone 11 Pro | 375 × 812 | 3x | 1125 × 2436 | 5,8" | 2019 |
| Apple iPhone 11 Pro Max | 414 × 896 | 3x | 1242 × 2688 | 6,5" | 2019 |
| Apple iPhone SE | 320 × 568 | 2x | 640 × 1136 | 4" | 2018 |
| Apple iPhone X | 375 × 812 | 3x | 1125 × 2436 | 5,8" | 2018 |
| Apple iPhone XR | 414 × 896 | 2x | 828 × 1792 | 6,1" | 2018 |
| Apple iPhone XS Max | 414 × 896 | 3x | 1242 × 2688 | 6,5" | 2018 |
| Apple iPhone 8 | 375 × 667 | 2x | 750 × 1334 | 4,7" | 2017 |
| Apple iPhone 8 Plus | 414 × 736 | 3x | 1080 × 1920 | 5,5" | 2017 |
| Apple iPhone 7 | 375 × 667 | 2x | 750 × 1334 | 4,7" | 2016 |
| Apple iPhone 7 Plus | 414 × 736 | 3x | 1080 × 1920 | 5,5" | 2016 |
| Apple iPhone 6s | 375 × 667 | 2x | 750 × 1334 | 4,7" | 2015 |
| Apple iPhone 6s Plus | 414 × 736 | 3x | 1080 × 1920 | 5,5" | 2015 |
| Apple iPhone 6 | 375 × 667 | 2x | 750 × 1334 | 4,7" | 2014 |
| Apple iPhone 5c | 320 × 568 | 2x | 640 × 1136 | 4" | 2013 |
| Apple iPhone 5s | 320 × 568 | 2x | 640 × 1136 | 4" | 2013 |
| Apple iPhone 5 | 320 × 568 | 2x | 640 × 1136 | 4" | 2012 |
Ordinateurs Apple
La largeur donnée est celle de la fenêtre du navigateur à la mise à l'échelle par défaut du système, et non la résolution de la dalle : c'est cette première valeur que voient vos media queries.
| Modèle | Viewport CSS | Densité | Résolution dalle | Diagonale | Année |
|---|---|---|---|---|---|
| Macbook Neo 2026 | 1204 × 753 | 2x | 2408 × 1506 | — | 2026 |
| Apple Macbook PRO 16" | 1728 × 1117 | 2x | 3456 × 2234 | 16,2" | 2021 |
| iMac 24" | 2048 × 1152 | 2x | 4096 × 2304 | 9,3" | 2021 |
| Apple MacBook Air 2020 13" | 1280 × 800 | 2x | 2560 × 1600 | 13,3" | 2020 |
Tablettes Apple
Les valeurs sont données en portrait. En paysage, largeur et hauteur s'inversent : Apple iPad Mini (6th Gen) passe de 768 x 1024 à 1024 x 768 pixels CSS. Vos points de rupture tablette doivent couvrir les deux.
| Modèle | Viewport CSS (portrait) | Densité | Résolution dalle | Diagonale | Année |
|---|---|---|---|---|---|
| Apple iPad Mini (6th Gen) | 768 × 1024 | 2x | 1536 × 2048 | 7,9" | 2021 |
| Apple iPad Air 4 | 820 × 1180 | 2x | 1640 × 2360 | 9,7" | 2020 |
| Apple iPad PRO 11" (3rd Gen) | 834 × 1194 | 2x | 1668 × 2388 | 11" | 2018 |
Montres connectées Apple
Le navigateur de ces montres n'affiche qu'une colonne : la largeur est la seule mesure qui compte, et elle est plus étroite que celle de tous les téléphones du parc.
| Modèle | Viewport CSS | Densité | Résolution dalle | Diagonale | Année |
|---|---|---|---|---|---|
| Apple Watch Series 6 (40mm) | 162 × 197 | 2x | 324 × 394 | 1,6" | 2020 |
Quelles largeurs tester en priorité
Les largeurs les plus représentées de la gamme sont 320, 375, 390 et 414 px. Les vérifier en premier couvre 25 des 49 modèles Apple référencés, et c'est sur elles que doivent tomber vos premiers points de rupture.
Descendez jusqu'à 162 px pour couvrir la gamme entière, Apple Watch Series 6 (40mm) comprise : une mise en page qui tient à cette largeur tient partout. Côté tablette, comptez aussi les valeurs en paysage, où largeur et hauteur s'inversent.
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 39 appareils Apple, 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.
- 39 appareils Apple 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
Autres marques
Questions fréquentes
Quel est le viewport CSS le plus courant chez Apple ?
375 x 812 px, partagé par 8 des 49 modèles référencés, dont Apple iPhone 13 Mini et Apple iPhone SE. C'est la largeur à vérifier en premier sur cette gamme.
Quelle largeur minimale tester pour couvrir les appareils Apple ?
162 px, la largeur du modèle le plus étroit de la liste, Apple Watch Series 6 (40mm). Si votre mise en page tient à 162 px, elle tient sur les 49 appareils Apple référencés, jusqu'au plus large qui atteint 2048 px.
Pourquoi la résolution annoncée par Apple ne correspond pas au viewport CSS ?
Parce que ces écrans affichent plusieurs pixels physiques par pixel CSS. Apple iPhone 17 a une dalle de 1206 x 2622 pixels et un viewport CSS de 402 x 874 px, soit une densité de 3. C'est la seconde valeur qu'il faut écrire dans une media query.
Les tablettes Apple ont-elles le même viewport en portrait et en paysage ?
Les valeurs sont inversées : Apple iPad Mini (6th Gen) affiche 768 x 1024 px en portrait et 1024 x 768 px en paysage. Les tableaux donnent les valeurs en portrait, et le simulateur permet de basculer d'une orientation à l'autre.
Comment tester son site sur un appareil Apple 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 39 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.