iPhone Duo Responsiveness Tester | Website Mobile Responsiveness Checker
The most accurate website responsiveness checker and mobile responsiveness checker. Preview your layouts on the dual-screen iPhone Duo, foldable displays, and modern devices in real time. Newly launched iPhone Duo support.
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.Why iPhone Duo Exposes Bad Responsive Web Design
For more than a decade, web responsive design assumed a single continuous canvas: you scale down from desktop to tablet to a tall portrait mobile screen. The launch of Apple's dual-screen iPhone Duo disrupts this assumption with two hardware displays connected by an active hinge seam.
The Hinge Trap
Centrally aligned elements like search bars, modals, call-to-action buttons, and product hero images get bisected by the 16px physical hinge if single-column flexbox isn’t segment-aware.
Squarish Aspect Ratios
Unfolded dual screens create an aspect ratio near 1:1. Layouts optimized strictly for vertical phone scrolling look hollow or suffer excessive white space when expanded across both panels.
New CSS Standards
W3C dual-screen media queries (horizontal-viewport-segments, screen-spanning) and CSS environment variables (env(viewport-segment-width)) are now required knowledge for modern front-end developers.
/* 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;
}
}Test Across All Popular Devices
Compare responsiveness across iPhones, Android foldables, and Microsoft dual-screen devices.
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.
What is the iPhone Duo Responsiveness Tester?
The iPhone Duo Responsiveness Tester (duoresponsive.com) is an online website responsiveness checker designed specifically to preview and test web pages on Apple's newly launched dual-screen iPhone Duo, modern foldables, and mobile devices. It provides pixel-perfect simulation of unfolded dual displays, folded cover screens, hinge seam offsets, and dual-screen CSS media queries.
How does this website responsiveness checker work?
Enter any website URL into our test bar and the tool renders the live site within accurate hardware frames in your browser. You can inspect single-screen vs dual-screen spanning, toggle book and tent postures, examine the central fold line, and rotate between portrait and landscape orientations without installing simulators or emulators.
Why do traditional responsive websites break on iPhone Duo?
Most existing websites assume a single continuous viewport. When unfolded, the iPhone Duo spans two separate screens with a physical 16px center hinge seam. Without responsive dual-screen CSS (such as @media (horizontal-viewport-segments: 2) and env(viewport-segment-width)), modals, search bars, text columns, and hero images can get sliced right through the middle.
Can I test local development servers like localhost?
Yes! Because the iPhone Duo Responsiveness Tester runs completely client-side in your own browser, you can enter local development URLs such as http://localhost:3000 or http://localhost:4321 to test before deploying.
What should I do if a website shows a connection refused or blank screen?
Some production websites (like Google or Twitter) send strict HTTP security headers such as X-Frame-Options: DENY or Content-Security-Policy: frame-ancestors 'none' that prevent embedding inside iframes. For these domains, you can click the 'Open in External Tab' button or test using a development server or proxy.