Your website on iPhone Duo: what the fold breaks

What we tested

We ran the iPhone Duo simulator from Xcode 27.1, on iOS 27.1, and opened pages in Safari with the phone closed, fully open and partly folded like a book. A small test page reported what the browser told it: the viewport size, the safe areas, and whether any of the web's foldable features were switched on. Then we loaded real stores.

This is a simulator, not the phone in hand, and the figures below are what Safari reported in it on 24 October 2026. The hardware figures are Apple's own.

The numbers a web page actually gets

Two oddities are worth knowing if you write code against these. The browser's user agent reported iOS 18.7, so you cannot detect the phone from it. And screen.width kept reporting the outer display's 466 by 678 points even with the phone open, so use the viewport, not the screen object.

What breaks: anything centred

Open fully and flat, the inner screen is one continuous panel and a centred layout looks fine. The problem is the book pose, partly folded, which Apple treats as the moment the fold becomes a region apps should keep content out of. Safari does not pass that on, so a web page keeps laying out across the crease.

That is Powerlete, one of our own brands, and it is the most common Shopify hero there is: a full-width image with the headline and the button centred over it. On a phone or a laptop that is the right layout. On the inner screen of iPhone Duo, partly folded, the headline breaks across the crease and the button you most want pressed is the hardest thing on the page to read. The same applies to anything else a theme centres: popups, cookie banners, newsletter offers and centred product images.

What holds: two columns

Fittr's landing page splits its hero into two columns, words on the left and product on the right, and on the inner screen that split lands roughly on the fold. It reads like a two-page spread, which is what Apple suggests apps do with this screen. Only the edge of the pack image crosses the line.

The narrow outer screen

Closed, the phone is easy to overlook because it behaves like a phone. But Safari puts its bar down the right-hand edge rather than along the bottom, so a page gets 382 CSS pixels of width, narrower than the 390 to 440 the iPhone 16 range gives a page in portrait. Most themes survive that. Fixed-width elements, wide tables and buttons sized for 390 are the ones to check.

How to fix it

Because the page cannot ask where the fold is, the fix is to stop relying on the centre of a screen around that size. In order of how much they help:

1. Move centred heroes off the middle at that width. Put the headline and button on one half, the way Fittr's split already does, rather than centred over the image.
2. Stop centring overlays. Popups, cookie banners and newsletter offers read better as a bottom sheet or pinned to one side than as a dialog in the middle of a 951 pixel screen.
3. Use a two-column split that matches the fold. Two equal columns with a gutter in the middle line up with the crease instead of fighting it.
4. Be ready for when Safari does report the fold. The web standards exist, and a page can test for them now so the fix switches itself on if they ever arrive.

/* iPhone Duo's open screen: touch, about 951px wide, landscape.
   On a phone only this screen matches; a resized iPad window can,
   and the change is harmless there. */
@media (pointer: coarse) and (min-width: 900px) and (max-width: 1000px)
  and (orientation: landscape) {
  .hero__content { margin-inline: 0 auto; max-width: 45%; text-align: start; }
  .modal { inset: auto 0 0 auto; width: 45%; }
}

/* If a browser ever reports the fold, use its real position. */
@media (horizontal-viewport-segments: 2) {
  .hero__content { max-width: env(viewport-segment-width 0 0); }
}

The class names will differ in your theme. Test the change in the simulator, partly folded, before you ship it, because the point is what it looks like across the crease.

If you have an app

Native apps are in a better position than websites. iOS tells an app where the fold is, and Apple's own containers move content out of it automatically. Apps built on fixed screen sizes are the ones that look wrong, and that is the part we fix. Our iOS app development work lays every app out for both of iPhone Duo's screens, and for a Shopify store the Shopify app side sits alongside it.

Where we sit, honestly

We chose our own stores as the examples because we would rather show our own fault than somebody else's, and because we test changes on our own brands before we recommend them to anyone. iPhone Duo will be a small share of your traffic for a while, and it is also a phone that costs from $1,999, so the people holding one are worth a storefront that reads properly. If you want to know how yours looks, we will check it in the simulator and tell you what we find.