The iPhone Duo's folded viewport sits right on the edge of a 480px mobile breakpoint, at an estimated 466pt

The 466 x 678pt number carries an assumption. Apple does not publish logical resolution, so the post divides the advertised pixel counts by three ^[4]. That holds only if the Duo renders at a 3x scale factor. Safari then takes more off the height for the address bar and toolbar, and the post is explicit that the only way to get real figures is to read window.innerWidth and window.innerHeight on a device ^[9].

Treat the estimate as a ceiling and the folded state is still an awkward size. 466pt is 26pt wider than 440pt, the top of the range the post gives for typical iPhone portrait widths ^[7][1]. It is also under 480, so a layout gated on max-width: 480px hands the folded Duo its phone styles ^[10]. Those styles get 678pt of height to work in.

Open the device and the estimate is 890 x 626pt ^[5]. The width matches tablet breakpoints ^[11]. The height comes in 52pt below what the folded state had ^[2]. On the same estimates the open viewport covers about 1.76 times the folded area, 557,140 pt2 against 315,948 ^[3], and the two states are not quite the same shape either: 2,034/1,398 is 1.455, 2,670/1,878 is 1.422, about two percent apart ^[2][3][4].

Nishiura, the post's author, expected only the open state to need work. "I assumed the folded state would be a normal narrow phone screen that existing mobile CSS would absorb, and that only the unfolded state needed thought," he wrote ^[17]. A typical iPhone in portrait is about 1:2.16 ^[7].

The spec written for this problem is CSS Viewport Segments. It reports the segment count and each segment's geometry to CSS and to JavaScript, and it is where hinge coordinates come from: the gap width is calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0)) ^[8]. On a device that does not fold, window.viewport.segments returns a single-element array covering the whole viewport, so there is no second code path to maintain ^[12]. It is implemented in Chrome and Edge, and the iPhone Duo does not run Chromium ^[6][13]. Nishiura points at iOS 27's Safari release notes as the place to check ^[13].

Without it, a Safari layout knows its width, its height and their ratio, and nothing about where the seam is. The post's fallback is container queries: set container-type: inline-size on the wrapper, branch with @container (min-width: 640px), and each element responds to the room it was given ^[14]. The other job is finding every place that measures the viewport once at first paint, because on this device the change arrives through folding rather than rotation ^[16]. Nishiura's own verdict on the fix: "Boring advice. It also happens to be the advice that pays off on every device, not just this one." ^[18]