Testeur de réactivité iPhone Duo | Vérificateur de réactivité mobile
Le vérificateur de réactivité de site web le plus précis. Prévisualisez vos mises en page sur l'iPhone Duo à double écran, les écrans pliables et les appareils modernes en temps réel. Support de l'iPhone Duo.
Site Blocked from Preview
has blocked embedding in iframes via X-Frame-Options or CSP.
@media (orientation: landscape)📐 Does horizontal-viewport-segments: 2 work in mockups?
The Direct Answer: Inside a normal <iframe> on desktop, @media (horizontal-viewport-segments: 2) evaluates to 1 by default.
Why? The CSS Viewport Segments specification is designed to query the underlying host operating system window, not an HTML element or CSS container. Because your desktop computer has a single unified display, standard desktop browsers report 1 segment to all page iframes.
segments: 2!spanning-css-polyfill script to your website to test dual-screen CSS rules anywhere.Pourquoi l’iPhone Duo révèle les faiblesses du design réactif
Depuis plus de dix ans, la conception responsive supposait un canevas continu unique. Le lancement de l’iPhone Duo à double écran d’Apple bouleverse cette hypothèse avec deux écrans physiques reliés par une charnière active.
Le piège de la charnière
Les éléments centrés (barres de recherche, modales, boutons d’action et bannières) sont coupés en deux par la charnière physique de 16px si le CSS n’est pas adapté aux segments.
Rapports d’aspect presque carrés
Les écrans dépliés offrent un ratio proche de 1:1. Les interfaces pensées uniquement pour le défilement vertical mobile paraissent vides ou souffrent d’espaces blancs excessifs.
Nouveaux standards CSS
Les requêtes média W3C pour double écran (horizontal-viewport-segments, screen-spanning) et les variables d’environnement CSS (env(viewport-segment-width)) deviennent indispensables.
/* Detect iPhone Duo & dual-screen unfolded mode */
@media (horizontal-viewport-segments: 2) {
.site-container {
display: grid;
/* Map columns to screen 1 and screen 2 with fold gap in between */
grid-template-columns:
env(viewport-segment-width 0 0)
calc(env(viewport-segment-left 1 0) - env(viewport-segment-width 0 0))
env(viewport-segment-width 1 0);
}
.sidebar {
grid-column: 1;
}
.main-content {
grid-column: 3;
}
}Testez sur tous les appareils populaires
Comparez la réactivité entre iPhones, pliables Android et appareils Microsoft à double écran.
iPhone Duo (Unfolded)
7.6″ Super Retina XDR OLED (2670×1878 at 430 ppi)
iPhone Duo (Cover Folded)
5.4″ Super Retina XDR OLED (1398×2034 at 460 ppi)
iPhone 16 Pro Max
Flagship Super Retina XDR
Samsung Galaxy Z Fold 6
Dynamic AMOLED 2X Foldable
Google Pixel Fold
Foldable OLED Landscape Inner Screen
Microsoft Surface Duo 2
Dual Screen AMOLED with Physical Gap
Frequently Asked Questions
Everything you need to know about testing website responsiveness on iPhone Duo and modern devices.
Qu'est-ce que le testeur de réactivité iPhone Duo ?
Le testeur de réactivité iPhone Duo (duoresponsive.com) est un vérificateur de réactivité de site web en ligne conçu spécialement pour prévisualiser et tester des pages web sur l'iPhone Duo à double écran nouvellement lancé par Apple, les appareils pliables modernes et les smartphones. Il offre une simulation au pixel près des écrans dépliés, des écrans de couverture pliés, de l'espacement de la charnière et des requêtes média CSS pour double écran.
Comment fonctionne ce vérificateur de réactivité de site web ?
Entrez l'URL d'un site web dans notre barre de test et l'outil affichera le site en direct dans des cadres matériels précis directement dans votre navigateur. Vous pouvez inspecter l'affichage sur un ou deux écrans, basculer entre les postures livre et tente, examiner la ligne de pliure centrale et changer l'orientation sans aucun simulateur lourd.
Pourquoi les sites web responsifs classiques cassent-ils sur l'iPhone Duo ?
La plupart des sites supposent une fenêtre d'affichage continue unique. Lorsqu'il est déplié, l'iPhone Duo utilise deux écrans séparés avec une charnière physique centrale de 16px. Sans CSS adapté (comme @media (horizontal-viewport-segments: 2) et env(viewport-segment-width)), les barres de recherche, modales, colonnes de texte et bannières peuvent être coupées en plein milieu.
Puis-je tester des serveurs de développement locaux comme localhost ?
Oui ! Parce que le testeur de réactivité iPhone Duo s'exécute côté client dans votre navigateur, vous pouvez entrer des URL de développement local comme http://localhost:3000 ou http://localhost:4321 pour tester avant le déploiement.
Que faire si un site affiche une erreur de connexion ou un écran blanc ?
Certains sites web de production (comme Google ou Twitter) envoient des en-têtes de sécurité HTTP stricts comme X-Frame-Options: DENY qui empêchent l'intégration dans des iframes. Pour ces domaines, vous pouvez cliquer sur le bouton 'Ouvrir dans un nouvel onglet' ou tester via un serveur de développement ou notre proxy.