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.
Scores, 6-point checklist and ready-to-copy code snippets.
Ready-to-use PWA & Safe Area Snippets
/* ─── PWA & Safe Area CSS (iOS Dynamic Island, Notch & Écrans Pliables) ─── */
: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);
}
/* ⚠️ RÈGLE CRUCIALE POUR LE HEADER :
En mode navigateur normal, Safari gère déjà l'espace sous la Dynamic Island.
Appliquer padding-top UNIQUEMENT en mode standalone PWA pour éviter 54px de blanc en trop ! */
@media all and (display-mode: standalone) {
header {
padding-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
}
}
/* Footer & Home Indicator physique */
body {
padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* Safe areas latérales (iPhone Paysage & Écrans pliables type iPhone Duo) */
main, .safe-x-container {
padding-left: max(1rem, env(safe-area-inset-left, 0px));
padding-right: max(1rem, env(safe-area-inset-right, 0px));
}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.
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
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.
Widescreen inner display: 2853 × 2007 px (806 × 567 px logical). Same height as Closed Portrait (567px), right side bar transparent in PWA mode.
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.