Free tool

Test your site on iPhone Duo

Simulate your website in all 3 postures of the iPhone Duo — in Safari or PWA standalone mode. Enter any URL.

Star on GitHub (Open Source)🇫🇷 Voir en français

Quick presets:

Browser Mode:

Device View:

Zoom Scale:

✨ PWA Standalone Active by default — Fullscreen with transparent safe areas — ⚡ PWA mode active: Safari bars rendered transparent. Physical safe areas preserved (Right: 84px on closed, Top on portrait, Right on landscape).

📊 View PWA Readiness Score ↓

Receive Full Audit & Fixes by Email

Scores, 6-point checklist and ready-to-copy code snippets.

📱Closed Portrait(390 × 567 px (Outer display: 1398 × 2034 px))

12:29

🌄Open Landscape(806 × 567 px (Inner display: 2853 × 2007 px))

12:29

📐Open Portrait(567 × 806 px (Inner display: 2007 × 2853 px))

12:29

0/ 100

PWA & Store Readiness Diagnostic

Ready-to-use PWA & Safe Area Snippets

/* ─── 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 — Certified Ionic Developer Expert (+100 mobile apps)

Want to turn this Web App into a Native iOS & Android App on the App Stores?

Keep your existing React/Next.js/Vue code. Kerweb transforms your site with Capacitor 8 & 9, native plugins (Biometry, Push, Camera), and guarantees 48h App Store & Google Play approval.

Get a 24h transformation quote⚡ Free feasibility audit & price estimate

🌐

Safari Mode

Standard browsing with address bar, back/share buttons. The Safari bar reduces usable height by approximately 88 px.

✓ Address bar visible
✓ Native navigation gestures active
✗ No full-screen

📱

PWA Standalone Mode

Full-screen without any Safari chrome. Requires a manifest.webmanifest with display: standalone.

✓ Full-screen — maximum height
✓ Dynamic Island safe area handled
✗ Requires a valid PWA manifest

The 3 iPhone Duo Postures

📱 Closed Portrait

Folded outer screen: 1398 × 2034 px (390 × 567 px logical). Right safe area of 84px and bottom safe area of 34px, transparent in PWA mode.

🌄 Open Landscape

Widescreen inner display: 2853 × 2007 px (806 × 567 px logical). Same height as Closed Portrait (567px), right side bar transparent in PWA mode.

📐 Open Portrait

Unfolded inner screen: 2007 × 2853 px (567 × 806 px logical). Camera hidden, top status bar transparent in PWA mode.

Your site isn't mobile-ready?

Kerweb transforms your web app into a native installable mobile app.

Web to Capacitor Mobile

Turn your website into an iOS & Android app installable from the stores.

Learn more

Web to SwiftUI Native iOS

Pure Swift native Apple app — maximum performance, premium experience.

Learn more

Store Compliance & Rejections 24h

Urgent fix for App Store & Google Play — Android 16 / Privacy Manifests.

Learn more

Web to Kotlin Android

Native Android Kotlin app — Target SDK 36, Jetpack Compose.

Learn more

Get a free quote