Mobile Simulation#iphone-duo#foldable-web-design#emuluxe-app-mode#responsive-design#safe-areas#pwa#mcp-server#mobile-testing
iPhone Duo: Foldable Web App Testing & App Mode
The iPhone Duo goes from a 5.4-inch cover display to a single 7.6-inch folding panel — a 466x678 to 890x626 viewport jump in one session. Here's what that breaks, and how to test for it.
AdminSep 30, 2026
Apple announced the iPhone Duo on 9 September 2026 — its first foldable iPhone, with pre-orders opening 16 October and retail availability on 23 October. Closed, it is a 5.4-inch phone that weighs 254g; open, it becomes a tablet-class 7.6-inch canvas. It starts at $1,999 for 256GB, tops out at 2TB, ships with iOS 27 and the A20 Pro, and comes in Night Sky or Star White with a grade 5 titanium frame and hinge.
Related articles
More workflows and guides built around high-fidelity mobile simulation.
For anyone who ships web interfaces, the interesting part is not the hardware — it is what the browser reports when the device opens.
On every phone you have tested so far, the viewport changes size. On the Duo, it changes shape. A user browsing your store on the cover display, then opening the device, moves your layout from a 466x678 portrait viewport to an 890x626 landscape one — in the same session, with the same DOM, without a reload. Layouts, hero sections, sticky headers and dialogs that assume a tall portrait rectangle are the ones that break.
Emuluxe models the Duo across its whole toolchain, and this guide covers what actually changes on the device, what breaks first, and how to verify each of it locally before your users are holding one.
1. What the iPhone Duo actually is
Apple's own technical specifications settle the questions that matter for layout work:
Posture
Display
Physical panel
CSS viewport (DPR 3)
Aspect ratio
Closed (cover)
5.4" Super Retina XDR OLED
1398 x 2034 @ 460 ppi
466 x 678
0.69 (portrait)
Open (inner)
7.6" folding Super Retina XDR OLED
2670 x 1878 @ 430 ppi
890 x 626
1.42 (landscape)
Four details follow from that table, and each one has a direct layout consequence:
The inner display is one panel, not two. The Duo is a book-style fold: the 7.6-inch Super Retina XDR display is a single continuous OLED with a small crease down the middle. Your page is not split across twin viewports and the browser does not report screen segments. Media queries keep working exactly as they do on any other iPhone — they just have to cope with a much wider, much shorter canvas.
The aspect ratio inverts. Closed is 0.69 (tall and narrow); open is 1.42 (wide and short). There is no gradual resizing between the two, and no intermediate width to observe. A layout that looks right at 466px is not merely "wider" at 890px — its vertical space has collapsed from 678px to 626px while its horizontal space has almost doubled.
The short axis is the expensive one. Landscape gives you 626px of height, and the safe-area insets plus browser chrome come out of that. 100vh heroes, tall sticky headers and bottom-fixed bars that are comfortable on a 678px-tall portrait screen eat a disproportionate share of an unfolded viewport.
Both displays are Dynamic Island displays. ProMotion up to 120Hz, Always-On, HDR and the top inset are present closed and open, so safe-area handling is the same job in both postures — which, at least, is one thing you do not have to branch on.
2. What breaks first on a foldable
These are the failures worth hunting for, in the order they tend to show up on a real Duo:
The breakpoint cliff. With no width between 466 and 890, layouts tuned to phone widths get a near-desktop canvas with none of the typography discipline you would normally apply. Text lines run long, grids stay two-column when they have room for four, and max-width containers that looked generous at 466px leave the unfolded layout hugging the left edge.
Vertical starvation. The unfolded viewport is 626px tall including safe areas. A sticky header sized for portrait, a cookie banner, and a modal can consume most of it, and centred dialogs end up half off-screen.
Content on the crease. The inner panel has a visible crease down its centre. Faces in product photography, long centred headlines and full-width charts that bisect the middle read as broken even though the DOM is fine.
Posture changes mid-session. Folding or unfolding does not reload the page. Scroll position, an open drawer, form input, a playing video and any ResizeObserver-driven layout must survive the change — and window.innerWidth will move by more than 400px when they do.
Insets and the island in landscape. The Dynamic Island sits at the top of a landscape viewport, so env(safe-area-inset-top) still matters when the device is unfolded. Full-bleed layouts that ignore it clip their own navigation.
Touch targets at 890px. Controls sized for a thumb on a 466px screen are small and far apart on a 626px-tall landscape canvas. The 44x44pt minimum does not change; reachability does.
3. CSS for a single-viewport foldable
Because the Duo reports one viewport, standard responsive tools do the work. Two additions matter: query the height as well as the width, and treat the orientation change as a first-class state rather than an edge case.
/* Insets are real in both postures (Dynamic Island + home indicator) */
:root {
--inset-top: env(safe-area-inset-top, 0px);
--inset-bottom: env(safe-area-inset-bottom, 0px);
}
.app-shell {
min-height: 100dvh; /* dvh, not vh: the unfolded viewport is 626px tall */
padding-top: var(--inset-top);
padding-bottom: var(--inset-bottom);
}
/* Portrait phone, closed: the cover display */
.grid { grid-template-columns: 1fr; }
/* Unfolded: wide and short. Height, not just width, decides the layout. */
@media (min-width: 700px) and (orientation: landscape) {
.grid { grid-template-columns: repeat(4, 1fr); }
.hero { padding-block: 24px; } /* there is less height to spend */
.sticky-header { position: static; } /* stop eating the 626px budget */
}
If your app also runs on dual-screen hardware — devices that genuinely expose two panels, such as the Surface Duo class — the browser can report viewport segments and you can lay out per panel:
// Feature-detect: the iPhone Duo is a single panel, so this is false there.
const segments = window.getWindowSegments?.() ?? [];
const isDualScreen = segments.length > 1;
/* Only fires on hardware that reports segments — never on a book-style fold */
@media (horizontal-viewport-segments: 2) {
.app-layout {
grid-template-columns:
env(viewport-segment-width 0 0)
env(viewport-segment-gap-width 0 0)
env(viewport-segment-width 1 0);
}
}
The distinction is worth internalising before you write any of it: the Duo is not a dual-screen device. Segment-aware CSS is the right tool for the Surface Duo family; for the iPhone Duo it is dead code that will never match, and a layout that depends on it will never be exercised. Build for one viewport that changes shape, and keep the segment queries as a progressive enhancement if you support both classes of hardware.
4. Testing the Duo in Emuluxe
Emuluxe models the iPhone Duo — both panels, both postures, and its insets — from one frame registry that every surface reads, so the device you see in the Chrome extension is the device you see in VS Code, Cursor and Web Studio: 466x678 closed, 890x626 open, DPR 3, iOS 27 user agent.
Posture switching. Move the Duo between folded, half-open and unfolded in the device panel. The fold plays Apple's spatial unfold (the inner panel blurs to a peak mid-fold and settles sharp) and your page keeps its state, because nothing reloads.
Both viewports in one session. Check the cover layout and then the unfolded layout without reconnecting, and watch ResizeObserver fire the way it will on hardware.
Geometry from the device profile. The titanium body, hinge and inner-display crease are drawn from the same spec the simulator uses, and the safe-area insets (34px top / 24px bottom) are applied to the simulated viewport rather than just the surrounding chrome.
AI audit while you simulate. Emuluxe's AI analysis flags mobile-specific layout shifts, visual regressions and accessibility violations. A posture change is precisely the kind of reflow it is built to catch.
Agents. The @emuluxe/mcp-server exposes the device catalogue and the simulation loop, so an agent can open an iPhone Duo session, capture frames and screenshots, and return a shareable result.
CI.emx bot-snap captures device-frame snapshots from the command line, so a foldable layout regression can fail a pull request.
A note on the name. Emuluxe ships App Mode for native apps: it drives a real iOS or Android build inside the same device frames, from a simulator, an emulator or a phone on your desk — emx app doctor|build|run|devices|logs|status|end in the CLI, and app_* tools for agents. That is a different feature from simulating your web app at the Duo's viewport. If native app testing is what you are after, start with Emuluxe App Mode.
5. Manifest and meta details that matter on a foldable
If your app installs as a PWA, three parts of your manifest behave differently once the device can change shape:
orientation defaults can lock an installed app to portrait. On a device whose whole point is opening into a wider canvas, "any" is usually what you want; a hard "portrait" will fight the hardware.
display and display_override decide how the installed app launches — standalone drops the browser URL bar, and window-controls-overlay lets you paint into the title bar area with env(titlebar-area-*). These affect the installed launch on the device; Emuluxe simulates the device viewport, so verify the launch behaviour in an installed build or on hardware.
theme_color / background_color control the surface behind your app during launch and in the status bar region. With an Always-On, 3000-nit display in both postures, a mismatched colour is very visible.
Add viewport-fit=cover to your meta viewport, or env(safe-area-inset-*) resolves to 0px and your insets silently do nothing:
VS Code / Cursor — Cmd+Alt+E launches the Emuluxe simulator beside your editor, and saving a file reloads the frame.
Chrome extension — point the Duo at a live production site or your local dev server and switch postures without leaving the browser.
MCP server for agents — connect Cursor, Claude Code or Devin to @emuluxe/mcp-server, and an agent can select the Duo, run a session and return frames plus screenshots.
CLI in CI — emx bot-snap captures device-frame snapshots from a pipeline; run emx app doctor first if you are also setting up native App Mode sessions.
Web Studio — the same device profile in the browser dashboard, so you can hand a session to a reviewer without an editor open.
7. Foldable launch checklist
Both viewports: tested at 466x678 closed and 890x626 unfolded, in landscape
Height budget: no 100vh hero and no tall sticky header inside a 626px-tall viewport
Insets: viewport-fit=cover plus env(safe-area-inset-top/bottom) on full-bleed surfaces
Crease: nothing that must read as one continuous image sits across the centre of the inner display
State: scroll position, open drawers, form input and media playback survive a fold/unfold
Touch targets: 44x44pt minimum, verified at 890px wide
Segments: dual-screen CSS is feature-detected so a book fold skips it cleanly
Verified in Emuluxe, then confirmed on hardware once you have one — retail availability starts 23 October 2026
Conclusion
The iPhone Duo does not ask you to learn a new layout language. It asks you to stop assuming that a mobile viewport only ever changes size. On this device the viewport changes shape: 466x678 becomes 890x626 with the same DOM, the same scroll position and the same session, and everything that depended on a tall portrait rectangle has to cope.
Two habits cover most of it. First, make your layouts height-aware, because the unfolded canvas is shorter than the folded one. Second, verify the change itself — a layout that looks acceptable in both postures independently can still break during the transition, and that is the state your users will hit every time they open the phone.
