Tailles de viewport iPad : pixels CSS, DPR et résolution
Comparez viewport CSS, DPR, résolution physique et année entre iPad Pro, Air, mini et iPad standard. Utilisez le tableau pour les breakpoints tablette, la QA responsive et les tests de mise en page.
É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 : Utilisez ce tableau de viewport iPad pour associer Pro, Air, mini et iPad standard à la taille CSS, au DPR, à la résolution physique et à l’année pour vos breakpoints tablette.
Tableau des tailles de viewport
| Modèle | Taille du viewport | Résolution d'écran | DPR | Année de sortie |
|---|---|---|---|---|
| iPad Air 13" (M3) | 1024 × 1366 | 2048 × 2732 | 2.0 | 2025 |
| iPad Air 11" (M3) | 820 × 1180 | 1640 × 2360 | 2.0 | 2025 |
| iPad (A16) | 820 × 1180 | 1640 × 2360 | 2.0 | 2025 |
| iPad mini (A17 Pro) | 744 × 1133 | 1488 × 2266 | 2.0 | 2024 |
| iPad Pro 13" (M4) | 1032 × 1376 | 2064 × 2752 | 2.0 | 2024 |
| iPad Pro 11" (M4) | 834 × 1210 | 1668 × 2420 | 2.0 | 2024 |
| iPad Air 13" (M2) | 1024 × 1366 | 2048 × 2732 | 2.0 | 2024 |
| iPad Air 11" (M2) | 820 × 1180 | 1640 × 2360 | 2.0 | 2024 |
| iPad Pro 12.9" (2022) | 1024 × 1366 | 2048 × 2732 | 2.0 | 2022 |
| iPad Pro 11" (2022) | 834 × 1194 | 1668 × 2388 | 2.0 | 2022 |
| iPad 10th Gen | 820 × 1180 | 1640 × 2360 | 2.0 | 2022 |
| iPad mini (2021) | 744 × 1133 | 1488 × 2266 | 2.0 | 2021 |
| iPad 9th Gen | 810 × 1080 | 1620 × 2160 | 2.0 | 2021 |
| iPad Pro 12.9" (2021) | 1024 × 1366 | 2048 × 2732 | 2.0 | 2021 |
| iPad Pro 11" (2021) | 834 × 1194 | 1668 × 2388 | 2.0 | 2021 |
| iPad Air (2020) | 820 × 1180 | 1640 × 2360 | 2.0 | 2020 |
| iPad 8th Gen | 810 × 1080 | 1620 × 2160 | 2.0 | 2020 |
| iPad Pro 12.9" (2020) | 1024 × 1366 | 2048 × 2732 | 2.0 | 2020 |
| iPad Pro 11" (2020) | 834 × 1194 | 1668 × 2388 | 2.0 | 2020 |
| iPad 7th Gen | 810 × 1080 | 1620 × 2160 | 2.0 | 2019 |
| iPad Air (2019) | 834 × 1112 | 1668 × 2224 | 2.0 | 2019 |
| iPad mini (2019) | 768 × 1024 | 1536 × 2048 | 2.0 | 2019 |
| iPad Pro 12.9" (2018) | 1024 × 1366 | 2048 × 2732 | 2.0 | 2018 |
| iPad Pro 11" (2018) | 834 × 1194 | 1668 × 2388 | 2.0 | 2018 |
| iPad 6th Gen | 768 × 1024 | 1536 × 2048 | 2.0 | 2018 |
| iPad Pro 10.5" | 834 × 1112 | 1668 × 2224 | 2.0 | 2017 |
| iPad Pro 12.9" (2017) | 1024 × 1366 | 2048 × 2732 | 2.0 | 2017 |
| iPad 5th Gen | 768 × 1024 | 1536 × 2048 | 2.0 | 2017 |
| iPad Pro 9.7" | 768 × 1024 | 1536 × 2048 | 2.0 | 2016 |
| iPad Pro 12.9" (2015) | 1024 × 1366 | 2048 × 2732 | 2.0 | 2015 |
| iPad mini 4 | 768 × 1024 | 1536 × 2048 | 2.0 | 2015 |
| iPad Air 2 | 768 × 1024 | 1536 × 2048 | 2.0 | 2014 |
Comprendre les tailles de viewport
Bases du viewport
- 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
- Orientation : L'iPad supporte les modes portrait et paysage
Considérations de design
- Concevez pour les orientations portrait et paysage
- Tirez parti de la grande surface d'écran de l'iPad
- Optimisez pour les interactions tactiles
- Utilisez les media queries appropriées pour les différents modèles d'iPad
- Pensez aux appareils pliables
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.