31 iPhone simulables · 320 à 440 px · portrait et paysage
L'extension reproduit dans votre navigateur le viewport CSS, la densité de pixel, le User-Agent et les gestes tactiles de 31 iPhone, de 320 à 440 px de large. Le tableau donne les mesures de chaque modèle, et chaque ligne renvoie à sa fiche complète.
1 500 000+ installations · 4,9/5 sur le Chrome Web Store
Installation gratuite en quelques secondes · ordinateur uniquement
Les 31 iPhone du simulateur se répartissent sur 11 largeurs différentes, de 320 à 440 px. Valider celui que vous avez sous la main ne dit donc rien des 10 autres : c'est d'un modèle à l'autre, et non d'une marque à l'autre, que la mise en page casse.
Selon la génération, chaque pixel CSS est rendu par 2 ou 3 pixels physiques : 11 modèles en 2x, 30 en 3x. Une image nette sur les premiers apparaît floue sur les seconds si vous ne servez pas de version haute résolution.
Basculé en paysage, un iPhone récent atteint 956 px de large et déclenche les points de rupture que vous réserviez aux tablettes. C'est l'orientation la moins testée, et celle où les en-têtes fixes mangent la moitié de l'écran.
Aucun Mac, aucun compte, aucun téléchargement d'image système : le simulateur s'applique à l'onglet ouvert.
11 largeurs CSS distinctes couvrent toute la sélection : 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, et le tableau permet de voir lesquels.
| 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 5 | 320 × 568 | 2x | 640 × 1136 | 4" | 2012 |
Les largeurs les plus représentées de la gamme sont 375, 390 et 428 px. Les vérifier en premier couvre 14 des 31 modèles du tableau : c'est sur elles que doivent tomber vos premiers points de rupture, avant d'en ajouter.
Descendez jusqu'à 320 px pour couvrir la gamme entière, y compris Apple iPhone 5 : une mise en page qui tient à cette largeur tient sur tous les iPhone en circulation. Les modèles récents montent à 440 px, soit un écart de 120 px entre les deux extrêmes.
Sur les modèles à encoche ou à Dynamic Island, la zone utile ne commence pas au bord de l'écran. Déclarez viewport-fit=cover puis réservez la marge avec les variables env(safe-area-inset-top) et env(safe-area-inset-bottom) : sans elles, une barre fixe en bas de page passe sous la barre d'accueil du système.
Attention à la hauteur sous Safari iOS : les barres d'interface réduisent la zone visible et se rétractent au défilement. Une hauteur en 100vh déborde donc du premier écran ; les unités svh et dvh donnent la valeur réellement affichée.
Le simulateur de Xcode fait tourner un vrai iOS et un vrai Safari : c'est le seul moyen de reproduire un bogue de moteur de rendu WebKit. Il demande un Mac, plusieurs gigaoctets de téléchargement et il ne s'ouvre pas au milieu d'une session d'intégration.
Le mode responsive des DevTools redimensionne la fenêtre du navigateur et change le User-Agent. C'est un outil d'inspection : pas de cadre d'appareil, pas de gestes tactiles réalistes, un seul écran à la fois, et rien à montrer à un client.
Mobile FIRST se place entre les deux. Il reproduit le viewport, la densité, le User-Agent et les événements tactiles de 31 iPhone dans le navigateur que vous avez déjà ouvert, sur Windows, macOS ou Linux, et affiche plusieurs modèles côte à côte. Le moteur de rendu reste celui de votre navigateur : pour valider un comportement propre à WebKit, un appareil réel ou le simulateur d'Apple restent nécessaires.
Les tableaux donnent les mesures. L'extension affiche votre site au viewport exact du modèle, avec sa densité, son User-Agent et la bascule portrait ou paysage.
Gratuit · 4,9/5 sur 5 100 avis
1 500 000+ utilisateurs
Il dépend du modèle et va de 320 à 440 px de large sur les 31 iPhone du simulateur. La valeur la plus courante est 390 px, partagée par 6 modèles. C'est cette largeur en pixels CSS, et non la résolution de la dalle, que lisent vos media queries.
Non, et c'est important de le savoir : il reproduit le viewport, la densité de pixel, le User-Agent et les gestes tactiles de l'iPhone dans le moteur de votre navigateur. Cela couvre la mise en page, les points de rupture et le comportement tactile. Pour un bogue propre au moteur WebKit, il faut un appareil réel ou le simulateur de Xcode.
Oui. L'extension s'installe sur Chrome, Firefox et Edge, sous Windows, macOS et Linux. Contrairement au simulateur de Xcode, elle ne demande ni matériel Apple ni téléchargement d'image système.
31 modèles préconfigurés, du plus récent au plus ancien, mis à jour à chaque sortie. Les 10 autres iPhone du catalogue ont chacun leur fiche technique sur le site : reportez-en la largeur et la densité dans un appareil personnalisé pour les retrouver dans la liste.
Celui de l'appareil choisi, tel qu'il l'envoie réellement. Pour Apple iPhone 17 sous iOS 26.0, c'est : Mozilla/5.0 (iPhone; CPU iPhone OS 26_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.0 Mobile/15E148 Safari/604.1. Les serveurs et les scripts de détection voient donc un iPhone, et non votre navigateur de bureau.
Le simulateur applique la marge de sécurité du modèle : une mise en page qui ignore env(safe-area-inset-bottom) laisse voir le problème comme sur l'appareil. Déclarez viewport-fit=cover dans la balise viewport pour que ces variables prennent une valeur.
Oui. L'extension s'applique à l'onglet courant quelle que soit l'URL : production, préproduction ou serveur local pendant le développement. C'est ce qui la distingue des simulateurs en ligne, qui ne voient pas votre machine.
Créez un appareil personnalisé avec la largeur, la hauteur et la densité de la fiche correspondante, puis sauvegardez-le : il rejoint la liste et se comporte comme les modèles préconfigurés.
iPhone, iPad, Safari et Xcode sont des marques d'Apple Inc. Mobile FIRST n'est ni affilié à Apple ni approuvé par Apple.
