maratooliPhone Duo Simulator
See how a page lands on Apple’s foldable before the device ships. Load a URL or paste HTML, then compare the folded cover panel and the unfolded inner panel side by side at their real CSS viewports.
Many sites refuse to be framed. If the panel stays blank, the HTML tab always works.
Rendered in a sandboxed frame on your machine. Nothing is uploaded.
Figures below are for the folded panel.
Breakpoints at this viewport
| Framework | Folded (466px) | Unfolded (890px) | Never renders |
|---|---|---|---|
| Tailwind CSS | base (unprefixed) | md ≥768 | sm |
| Bootstrap 5 | base (unprefixed) | md ≥768 | sm |
At the viewport shown above, Tailwind CSS is on base styles and Bootstrap 5 is on base styles. Opening the hinge moves the page 424 CSS pixels in one step, which is why a tier you only styled at sm never gets rendered on this device.
Starting CSS
/* iPhone Duo — cover panel, device folded (466×678 CSS px @3x) */
@media (max-width: 466px) and (orientation: portrait) {
/* single column, thumb-reachable actions */
}
/* iPhone Duo — inner panel, device unfolded (890×626 CSS px @3x) */
@media (min-width: 467px) and (max-width: 890px) and (orientation: landscape) {
/* short and wide: watch vertical space, not horizontal */
}
/* Hinge-aware layout. Chromium ships this; Safari does not yet, so treat
it as an enhancement on top of the width queries above. */
@media (horizontal-viewport-segments: 2) {
/* keep interactive elements out of the crease */
}What is iPhone Duo Simulator?
The iPhone Duo Simulator renders a page inside a frame shaped like Apple’s foldable, at the two viewports the device actually reports: 466 × 678 CSS pixels on the closed cover panel and 890 × 626 on the inner panel once it opens. Load a URL or paste your own HTML, put both states next to each other, and the readout underneath tells you which framework breakpoint each one lands on. It runs entirely in your browser, so nothing you paste leaves the page.
How to use
- Paste a URL, or switch to the HTML tab and drop in your own markup.
- Pick Folded, Unfolded, or Side by side to compare both panels at once.
- Read the breakpoint row under the frame to see which tier your CSS is on.
Frequently asked questions
What are the iPhone Duo screen sizes for CSS?
Folded, the cover panel reports a 466 by 678 CSS pixel viewport. Unfolded, the inner panel reports 890 by 626 and is landscape. Both run at a device pixel ratio of 3, so the physical grids are 1398 by 2034 and 2670 by 1878.
Why is the site I typed in showing a blank frame?
The site sends an X-Frame-Options header or a Content-Security-Policy frame-ancestors directive, which tells your browser to refuse the embed. No preview tool running in a page can override that. Switch to the HTML tab and paste your markup, which renders in every case.
Is this an emulator?
No, and the difference matters. It renders your page at the exact viewport, pixel ratio and shape of each panel, using your own browser engine. A real emulator runs iOS and the Safari engine, which needs Xcode on a Mac. For layout, breakpoint and crease work the viewport is what decides the outcome.
Which CSS breakpoint does unfolding trigger?
Unfolding takes the viewport from 466 to 890 CSS pixels in one movement. In Tailwind that leaves the unprefixed base styles and lands on md, skipping sm entirely. Bootstrap 5 does the same, going from below sm straight to md. Anything you only styled at sm never renders on this device.
Last updated
Powered by maratool