iPhone Duo Responsiveness Tester | Website Mobile Responsiveness Prüfer
Der präziseste Website- und Mobile-Responsiveness-Checker. Testen Sie Layouts auf dem Dual-Screen iPhone Duo, faltbaren Displays und modernen Mobilgeräten in Echtzeit.
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.Warum das iPhone Duo fehlerhaftes Responsive Webdesign aufdeckt
Seit mehr als einem Jahrzehnt ging Responsive Design von einer kontinuierlichen Bildfläche aus. Das Apple iPhone Duo mit Doppelbildschirm durchbricht diese Annahme mit zwei Displays und einem Scharnier.
Die Scharnier-Falle
Mittig ausgerichtete Suchleisten, Modals und Hero-Bilder werden durch das 16px Scharnier zerschnitten, wenn CSS-Segmente fehlen.
Quadratische Seitenverhältnisse
Aufgeklappte Doppelbildschirme haben ein Seitenverhältnis von fast 1:1. Reine Smartphone-Layouts wirken unvollständig oder leer.
Neue CSS-Standards
W3C-Dual-Screen-Media-Queries und Umgebungsvariablen wie env(viewport-segment-width) gehören nun zum unverzichtbaren Entwicklerwissen.
/* 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;
}
}Auf allen gängigen Geräten testen
Vergleichen Sie die Responsiveness auf iPhones, Android-Foldables und Microsoft-Geräten.
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.
Was ist der iPhone Duo Responsiveness Tester?
Der iPhone Duo Responsiveness Tester (duoresponsive.com) ist ein Online-Website Mobile Responsiveness Prüfer, der speziell entwickelt wurde, um Webseiten auf Apples neuem iPhone Duo mit zwei Bildschirmen, modernen Foldables und Mobilgeräten zu testen. Er bietet eine pixelgenaue Simulation von aufgeklappten Dual-Displays, Cover-Bildschirmen, Scharnierversatz und Dual-Screen-CSS-Media-Queries.
Wie funktioniert dieser Website-Responsiveness-Checker?
Geben Sie eine Website-URL in unsere Testleiste ein, und das Tool rendert die Live-Website in präzisen Hardware-Rahmen direkt in Ihrem Browser. Sie können Einzel- vs. Dual-Screen-Ansichten prüfen, Buch- und Zelt-Haltungen umschalten und Ausrichtungen drehen, ohne Emulatoren zu installieren.
Warum brechen traditionelle responsive Websites auf dem iPhone Duo?
Die meisten Websites setzen einen einzelnen kontinuierlichen Viewport voraus. Im aufgeklappten Zustand erstreckt sich das iPhone Duo über zwei getrennte Bildschirme mit einem 16px Scharnier. Ohne duales CSS (wie @media (horizontal-viewport-segments: 2)) werden Suchleisten, Modals und Hero-Bilder in der Mitte durchtrennt.
Kann ich lokale Entwicklungsserver wie localhost testen?
Ja! Da der iPhone Duo Responsiveness Tester vollständig clientseitig in Ihrem Browser läuft, können Sie lokale URLs wie http://localhost:3000 oder http://localhost:4321 vor der Bereitstellung testen.
Was tun bei Verbindungsfehlern oder weißem Bildschirm?
Einige Websites (wie Google oder Twitter) senden strenge HTTP-Sicherheitsheader wie X-Frame-Options: DENY. Für diese Domains können Sie auf 'In externem Tab öffnen' klicken oder lokale Proxies nutzen.