Foldables
iPhone Duo, every way it opens.
A real template from this kit, rendered at each viewport Safari gives a page on iPhone Duo. Fold it, and the pipeline takes one half of the screen and the selected deal the other, with nothing on the hinge.
Pose
Page
What is real here
- The widths and heights. They are the CSS viewports WebKit published for Safari 27.1 on iPhone Duo.
- The page. Each screen is the template itself at that exact CSS width, so every media query in it answers as it would on the device.
- The folded layout. It is the same CSS that runs on the device; the gate renders it with a real emulated fold in Chrome and fails the page if any text or control lands on the hinge.
What is simulated
- The fold. No desktop browser has one to report, so this page tells the template where it is through the
URL. On the device, Safari reports it through
env(viewport-segment-*)once its Viewport Segments flag is on. - The hinge position, 455 to 495px. A third party measured it in Apple's simulator; Apple does not publish it.
- Safari itself. This is your browser drawing the page, not Safari, and only the book pose on its side is shown folded.
Sources: WebKit features for Safari 27.1,
and scripts/verify_responsive.mjs, which tests all five widths and the fold.