iPhone Duo Viewport Size and Resolution for Web Developers

Updated October 23, 2026 · Measured in Safari on iOS 27.1

Folded, the iPhone Duo gives your page a 382 × 580 CSS px viewport. Unfolded in landscape it's 951 × 543 CSS px, with the fold at x = 475.5 px. The device pixel ratio is 3 on both screens.

Safari viewport in every pose

Heights change as Safari's toolbar collapses on scroll. Measured in the Xcode 27.1 iPhone Duo simulator; values on hardware can differ by a few pixels.

Resolution: pixels vs points vs CSS px

Many spec sites divide the panel resolution by 3 and list the inner viewport as 890 × 626. That's not what Safari reports. Like the iPhone 12 mini, the inner screen is laid out at a larger point size and downsampled, so pages get 951 CSS px of width.

The right-hand Safari column when folded

The outer screen is 466 pt wide, but iOS 27 reserves an 84pt vertical column on the right for the front camera, clock, signal and Safari's back, bookmarks, new tab and tabs buttons. screen.width reports 466 while window.innerWidth is 382. Two things to know:

• Full-width sticky headers end abruptly at the column instead of running edge to edge.
• Safari doesn't use theme-color to tint the column. It samples the color of fixed or sticky elements at the right edge of the page instead.

The crease is at x = 475.5 px

Unfolded, the hinge runs down the center of the 951 px viewport. Centered hero text, single CTA buttons and centered form fields land directly on it. There's no media query for the hinge in Safari yet, so the safest fix is a two-column layout with a gutter at wide, touch-first widths:

/* Wide touch screens (iPhone Duo unfolded, small tablets) */
@media (min-width: 900px) and (max-width: 1024px) and (pointer: coarse) {
  .hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 48px; /* keeps content off the center fold */
  }
}

Media queries and detection

Don't build for one device, but make sure your smallest breakpoint works at 382 px and add these to your test matrix:

/* iPhone Duo folded (outer screen, portrait) */
@media (width: 382px) and (-webkit-min-device-pixel-ratio: 3) { }

/* iPhone Duo unfolded (inner screen, landscape) */
@media (width: 951px) and (pointer: coarse) { }

// Rough client-side check (no official API exists yet)
const isDuoFolded = screen.width === 466 && window.innerWidth === 382;
const isDuoUnfolded = window.innerWidth === 951 && matchMedia("(pointer: coarse)").matches;

The iPhone Duo uses the same Safari user agent format as other iPhones, so you can't tell it apart from the UA string alone:

Mozilla/5.0 (iPhone; CPU iPhone OS 27_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/27.1 Mobile/15E148 Safari/604.1

And keep the standard viewport tag:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

FAQ