Outil gratuit

Testez votre site sur iPhone Duo

Simulez votre site web dans les 3 postures de l’iPhone Duo en mode Safari ou PWA standalone. Entrez n’importe quelle URL.

Code source Open Source (GitHub)🇬🇧 View in English

Préréglages rapides :

Mode de navigation :

Vue de l’appareil :

Échelle de zoom :

✨ Mode PWA Standalone actif par défaut — Plein écran avec zones sécurisées transparentes — ⚡ Mode PWA actif : Barres Safari transparentes. Safe areas physiques préservées (Droite : 84px en fermé, Haut en portrait, Droite en paysage).

📊 Voir le score d’audit PWA ↓

Recevoir le rapport complet & correctifs par email

Détail des notes, checklist 6 points et snippets de code prêts à l’emploi.

📱Portrait Fermé(390 × 567 px (Écran externe : 1398 × 2034 px))

12:29

🌄Paysage Ouvert(806 × 567 px (Écran interne : 2853 × 2007 px))

12:29

📐Portrait Ouvert(567 × 806 px (Écran interne : 2007 × 2853 px))

12:29

0/ 100

Diagnostic PWA & Compatibilité Stores

Snippets PWA & Safe Areas prêts à l’emploi

/* ─── PWA & Safe Area CSS (iOS Dynamic Island & iPhone Duo Foldable) ─── */
:root {
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
}

/* Header sticky : sécuriser le haut et les capsules latérales */
header {
  padding-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  padding-left: calc(var(--safe-area-inset-left, env(safe-area-inset-left, 0px)) + 1rem);
  padding-right: calc(var(--safe-area-inset-right, env(safe-area-inset-right, 0px)) + 1rem);
}

/* Footer : préserver l'indicateur home physique */
footer {
  padding-bottom: calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 1rem);
}

/* Contenu principal : éviter le chevauchement avec les zones matérielles */
body > * > main {
  padding-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
  padding-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
}

Julien Kermarec — Certifié Ionic Developer Expert (+100 apps déployées)

Envie de transformer cette Web App en application native iOS & Android sur les Stores ?

Conservez 100% de votre code Web actuel. Kerweb adapte vos applications avec Capacitor 8 & 9, intègre le natif (Face ID, Notifications, Caméra) et garantit la validation Apple & Google sous 48h.

Obtenir un chiffrage sous 24h⚡ Audit de faisabilité & estimation sans engagement

🌐

Mode Safari

Navigation classique avec barre d’adresse et boutons retour/partage. La barre Safari réduit la hauteur utile d’environ 88 px.

✓ Barre d’adresse visible
✓ Gestes de navigation système
✗ Pas de plein écran

📱

Mode PWA Standalone

Plein écran sans barre Safari. Requiert un manifest.webmanifest avec display: standalone.

✓ Plein écran — hauteur maximale
✓ Safe area Dynamic Island
✗ Requiert un manifest PWA valide

Les 3 postures de l’iPhone Duo

📱 Fermé Portrait

Écran externe replié : 1398 × 2034 px (390 × 567 px logiques). Safe area droite de 84px et basse de 34px, transparentes en mode PWA.

🌄 Ouvert Paysage

Écran interne widescreen : 2853 × 2007 px (806 × 567 px logiques). Même hauteur que Fermé Portrait (567px), barre à droite transparente en PWA.

📐 Ouvert Portrait

Écran interne déplié vertical : 2007 × 2853 px (567 × 806 px logiques). Caméra masquée, barre de statut en haut transparente en PWA.

Votre site n’est pas prêt pour mobile ?

Kerweb transforme vos applications web en apps mobiles natives installables.

Web vers Capacitor Mobile

Transformez votre site en app iOS & Android installable depuis les stores.

Web vers SwiftUI iOS Natif

App native Apple pur Swift — performance maximale, expérience premium.

Conformité & Rejets Stores 24h

Déblocage urgent App Store & Google Play — Android 16 / Privacy Manifests.

Web vers Kotlin Android

App Android native Kotlin — Target SDK 36, Jetpack Compose.

Obtenir un devis gratuit