iPhone Duo: Screen Size & CSS Viewport

The iPhone Duo is Apple's first foldable iPhone, announced on September 9, 2026 and shipping on October 23. It has two displays: a 5.4″ outer screen at 1398×2034 pixels and a 7.6″ inner screen at 2670×1878 pixels that opens in landscape. Assuming the usual iPhone device pixel ratio of 3, that works out to CSS viewports of about 466×678 on the outer screen and 890×626 on the inner screen. Apple has not published browser values yet, so treat both numbers as estimates until the device is in hand.

The outer screen is unusually short and wide for a phone. At 466px it is the widest iPhone viewport ever in portrait, yet 678px of height is less than any modern iPhone offers. Hero sections sized with 100vh and onboarding flows that expect 800px or more of vertical space will feel cramped. Unfolded, the 890px width crosses Tailwind md (768px) and Bootstrap md (768px) but stays below lg (1024px), so visitors get your tablet layout on a screen that is wider than it is tall, unlike a portrait iPad.

Plan for the transition between the two states. When the phone unfolds, the viewport jumps from 466px to 890px in one step, which fires resize events, can re-trigger layout-dependent JavaScript and may reset scroll position if you rebuild components on breakpoint changes. Use CSS for the layout switch wherever possible, avoid storing layout state that depends on a fixed width, and test with Split View because the inner screen supports two apps side by side, each with a narrower viewport.

The Dynamic Island appears on both screens, so safe area insets matter in both states. Check that fixed headers and bottom toolbars respect env(safe-area-inset-*) and that nothing important sits under the island on the inner display.