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.
Détail des notes, checklist 6 points et snippets de code prêts à l’emploi.
Snippets PWA & Safe Areas prêts à l’emploi
/* ─── 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));
}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.
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
Écran externe replié : 1398 × 2034 px (390 × 567 px logiques). Safe area droite de 84px et basse de 34px, transparentes en mode PWA.
Écran interne widescreen : 2853 × 2007 px (806 × 567 px logiques). Même hauteur que Fermé Portrait (567px), barre à droite transparente en PWA.
É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.