Simulateur de zone sûre iPhone et générateur CSS

Consultez les marges sûres des iPhone en portrait et paysage. Comparez le chevauchement des boutons et copiez du CSS ou du Tailwind.

Dans votre navigateur · Sans inscription

Appareil

Orientation

Afficher les zones

Schéma indicatif : caméra et angles ne sont pas des contours exacts.

Marges de référence pt

Haut: 0
Droite: 84
Bas: 34
Gauche: 0

Écran logique: 466 × 678 pt
Dimensions sûres: 382 × 644 pt
Résolution native: 1398 × 2034 px
Échelle de rendu: 3×

Comprendre les valeurs

Données mises à jour 2026-09-26

Espacement du contenu16 px

Les tailles logiques et marges de l’iPhone Duo proviennent du simulateur iOS 27.1 ; le paysage correspond à une rotation vers la gauche. L’écran interne conserve la barre d’état. Les blocs foncés représentent les zones réservées. Le format logique de 669 × 951 pt et la résolution physique officielle de 1878 × 2670 px sont distincts, sans conversion directe à 3×. Ces vues ouvertes et fermées ne sont pas des mesures sur appareil réel.

Code adaptatif

Le code utilise env() en temps réel, pas les valeurs fixes du profil. L’espacement modifie le code ; le commutateur sert à comparer. Une place est réservée à la barre et au bouton de 44px. Vérifiez les contenus plus hauts, Safari et les PWA.

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

<style>
  .safe-page {
    box-sizing: border-box;
    min-height: 100dvh;
    padding: 16px;
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
  }
  .safe-bottom-bar {
    position: fixed;
    inset: auto 0 0;
    box-sizing: border-box;
    padding: 16px;
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
    background: #fff;
    color: #171717;
  }
  .safe-bottom-bar button { min-height: 44px; width: 100%; }
</style>

<main class="safe-page"><!-- Page content --></main>
<footer class="safe-bottom-bar"><button>Continue</button></footer>

Zone sûre de ce navigateur

Lecture des valeurs du navigateur…

Valeurs CSS px du navigateur, indépendantes du profil. Zéro peut être correct sur ordinateur ou dans un viewport rectangulaire. Elles peuvent changer à la rotation ou au redimensionnement. Aucun appareil n’est identifié et Safari n’est pas émulé.

Tableau des zones sûres iPhone

Valeurs en portrait, en points logiques (pt), au zoom standard avec la barre d’état visible. Les dimensions sûres soustraient les deux marges correspondantes à la taille logique de l’écran. Vérifiez aussi sur appareil réel.

Tableau des zones sûres iPhone — Portrait
Appareil	Écran logique	Haut (pt)	Bas (pt)	Droite (pt)	Dimensions sûres
iPhone Duo · Écran externe · Fermé	466 × 678	0	34	84	382 × 644
iPhone Duo · Écran interne · Ouvert	669 × 951	82	34	0	669 × 835
iPhone 16 Pro	402 × 874	62	34	0	402 × 778
iPhone 16 Pro Max	440 × 956	62	34	0	440 × 860
iPhone 14 Pro	393 × 852	59	34	0	393 × 759
iPhone 13 mini	375 × 812	50	34	0	375 × 728
iPhone 12	390 × 844	47	34	0	390 × 763
iPhone 11	414 × 896	48	34	0	414 × 814
iPhone X	375 × 812	44	34	0	375 × 734
iPhone SE (3rd gen)	375 × 667	20	0	0	375 × 647

Mode d’emploi

Choisissez un appareil et une orientation.
Comparez les marges et l’espacement dans la démonstration.
Copiez le CSS ou le Tailwind et testez sur vos appareils cibles.

Exemple

padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));

Détails et limites

Les CSS px, les points natifs et les pixels physiques sont distincts. L’iPhone 13 mini effectue un rendu à 3× puis le réduit à sa résolution native.

Les valeurs varient selon le système, le zoom et les barres du navigateur. Le schéma ne constitue pas un modèle de design exact.

FAQ

Pourquoi 0px dans mon navigateur ?

Un viewport rectangulaire peut ne nécessiter aucune marge. Sélectionner un iPhone ne change pas le navigateur réel.

Puis-je fixer une marge de 34px en bas ?

Utilisez env(safe-area-inset-bottom, 0px) avec votre espacement pour les autres orientations et appareils.

Page de l’outil mise à jour le : 2026-09-26