iPhone Duo viewport size: what Safari gives your page

The numbers Safari uses

WebKit published the iPhone Duo’s viewport sizes when the phone launched with Safari 27.1 on 23 October 2026. These are CSS pixels: what window.innerWidth and your media queries see. SVH is the height with Safari’s controls showing (100svh); LVH is the height with them collapsed (100lvh).

Source: WebKit, “WebKit Features for Safari 27.1”. The inner display is 2853 × 2007 physical pixels, which is 951 × 669 points at 3×, so devicePixelRatio is 3 like other current iPhones.

Why it isn’t 466 pixels

Many device sites list the Duo’s outer display as 466 × 678. That is the whole screen. On the closed phone Safari puts its status bar and buttons in a column down the side instead of a toolbar at the bottom, and that column takes 84 points. The page gets the remaining 382.

One developer who measured the Duo simulator found that screen.width still reports 466 after unfolding, so don’t size layouts from screen; use innerWidth, media queries or container queries. WebKit says web content doesn’t yet extend behind that side column: Safari fills it with the page’s background colour, and WebKit is researching a safer option than viewport-fit=cover for that space. No date has been given.

Owners have noticed. In the MacRumors thread on Apple’s plans for the outer display, one member wrote that “most webpages look like poorly embedded iFrames on the smaller screen”.

What tends to break

• Fixed widths just above 382. A 390 or 400 px element, a hard-coded min-width on a card, or a carousel sized for a 390 px phone overflows sideways. Most sites cope with the 375 px iPhone SE, so 382 itself is rarely the problem: fixed widths are.
• The short outer landscape. 594 × 368 is wide enough for a two-column layout but very short. A sticky header and a cookie banner can leave almost no content on screen.
• 669 px, between the usual breakpoints. It sits above a 640 px breakpoint and below 768, so a page can switch to a tablet layout with phone-sized touch targets, or stay in a stretched phone layout. Check both sides of your breakpoint.
• 100vh heroes. On the outer display 100vh resolves to the large height (618), taller than the visible area when Safari’s controls show (580). Use 100svh or 100dvh, with 100vh as a fallback.
• Hover-only controls. Every pose is a touch screen. Gate hover menus on @media (hover: hover) and (pointer: fine), not on width: 951 px wide does not mean a mouse.
• User-agent sniffing. The Duo identifies as an iPhone. WebKit’s advice is to drop UA checks and use responsive design and feature detection.

Fold detection: available, but off by default

Safari 27.1 includes the Device Posture API and the Viewport Segments API as a developer preview. They are off unless you turn them on in Settings > Apps > Safari > Advanced > Feature Flags, so your visitors won’t have them. WebKit says there “may still be time to evolve how they work”.

Treat them as progressive enhancement. A layout that only splits across the fold when the browser reports two segments is safe, because everyone else gets the normal layout:

/* Normal fluid layout first. Then, only where the browser
   reports two side-by-side segments: */
@media (horizontal-viewport-segments: 2) {
  .reader {
    display: grid;
    grid-template-columns:
      env(viewport-segment-width 0 0)
      env(viewport-segment-width 1 0);
    column-gap: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
  }
}

A folded or fully open phone reports the posture continuous; only a partly folded phone reports folded. Folding and unfolding fires an ordinary resize without reloading the page, so JavaScript that measures the layout once at load will be wrong after the first fold.

How to test the Duo widths

1. Xcode 27.1 or later. Device Hub can create an iPhone Duo simulator with real Safari, including the side column and fold poses. It is free but needs a Mac with Xcode installed.
2. Desktop browser devtools. Set custom sizes of 382 × 580, 594 × 368, 669 × 867, 951 × 585 and 385 × 571. This catches overflow and breakpoint problems quickly, but it is a different engine and doesn’t draw Safari’s side column.
3. A real iPhone Duo, if you have one. Rotate it and fold it with the page open, because the transitions are where measured-once layouts fail.
4. On an iPhone or iPad you already own, a viewport tool such as ViewPortal (below) renders the page at the Duo widths with Safari’s engine.

Whichever you use, check the page after a fold, not only after a fresh load.

Questions people ask

Sources and threads

• WebKit: WebKit Features for Safari 27.1 (23 October 2026)
• MacRumors Forums: Apple Wants to Fix Safari’s Cramped Layout on iPhone Duo
• DEV Community: I measured what Safari actually gives your web page on iPhone Duo
• PPC Land: Safari 27.1 on iPhone Duo runs web pages from 382 to 951 pixels wide
• MDN: Viewport Segments API
• MDN: Device Posture API

More guides

• How to open localhost on your iPhone
• How to inspect element on iPhone
• All responsive testing guides