BuildNot yet confirmed elsewhere1 publisher2 min readPublished
Safari leaves 382 points of layout on the iPhone Duo's 466-point outer screen, one studio found
Web teams should test layouts at 382, 466, 626 and 890 points before the iPhone Duo goes on sale October 23, a dev.to checklist says. Three of those widths are Apple's pixel counts divided by 3; 382 is one studio's simulator reading.
The Engineer · Build desk
Four figures. The 7.6-inch screen is 626 px wide. Tailwind's first step, sm, is 640 px and does not fire at 626, so that screen gets the CSS of a 6.3-inch iPhone. Most write-ups quote 890 as the unfolded width, where Tailwind and Bootstrap serve their md tier of 768 px.
| Figure | Value | Note | Claim |
|---|---|---|---|
| Width of the 7.6-inch screen | 626 px | 7 | |
| Tailwind's first step (sm) | 640 px | 19 | |
| Unfolded width, as quoted | 890 points | 3 | |
| md tier served at 890px | 768 px | 6 |
What happened
- Apple publishes only physical pixels, 1878 x 2670 inside and 1398 x 2034 outside, so the 466, 626 and 890 figures come from dividing by the usual iPhone pixel ratio of 3.
- Safari on the Duo keeps a strip of controls down the right edge, according to the post.
- At 890 pixels, Tailwind and Bootstrap both serve their 768-pixel md tier, the one most teams treat as tablet portrait.
- A September r/webdev post titled "Dear God websites look horrible on iPhone Duo" said closed-phone sites used about 70% of the screen and passed 3,000 upvotes.
- Pre-orders open October 16, seven days before the phone goes on sale.
Why it matters
- constraint A rule pinned to 890 fits this phone only. The post says the next foldable will ship different numbers, so breakpoints have to follow where content breaks.
- exposure Almost nobody owns the device, so pre-launch testing rests on division by 3 and one studio's simulator run. A layout that passes at 466 can still be served 382.
- decision Sites that switch to desktop navigation at 890 points have to decide how that menu opens on touch, where hover is emulated with an awkward tap. The post's answer is to gate hover rules on input type.
The 382 reading changes what a closed Duo means for a layout. The web view is 466 points wide and the layout viewport is 382, so 84 points are gone [30], and the viewport is about 82 percent of the web view's width [31]. The studio took the reading in Apple's iOS 27.1 simulator [24]. The Reddit thread's complaint was that sites used about 70 percent of the screen [8]. Those two figures measure different things, and the checklist does not reconcile them.
The post is plain about the status of its other widths. It says: "Treat the table as a test plan. Never treat it as a breakpoint list." [17] Each value in that table is a physical pixel count divided by 3 [2], and the post warns that innerWidth may be smaller than every one of them [25]. The inner display's shorter side divides to 626 [18].
For a site already in production, the post supplies a DevTools script. It reads the stylesheet rules, keeps the widths from media rules with a width condition, and multiplies em and rem values by 16 [10]. It skips cross-origin sheets and reports how many. A count above zero means the list is incomplete [9]. Placing 382, 466, 626 and 890 against that list shows whether two of them land in one tier [11]. Tailwind's sm step starts at 640, 14 points above 626 [7][19].
The post's container-query example turns a card into a two-column grid, a 12rem column and a flexible one, once its container reaches 34rem [14]. At a 16 px root that is 544 points [20]. If Split View gives a page half of 890, no container inside it can exceed 445 points [21]. On the post's own example, those cards would stack [13].
Heights are less settled than widths. The post describes vh as the large viewport, the size with browser UI retracted, and says a 100vh hero can push its button below the fold on the 678-point outer screen [26]. Its rule is svh for marketing heroes and dvh for full-screen app shells [27]. The studio's simulator resolved 100vh to 598, 80 points under the screen height, and found no unit that matched the visible height under Safari's floating toolbar [28][32]. The post's advice is to open the hero in the simulator and look before trusting any unit [29].
What to watch
- Whether hardware measurements after October 23 reproduce the studio's 382-point viewport and its 598-point 100vh reading.
- Whether Apple publishes CSS point sizes for the two displays, since it lists physical pixels only.
- Whether anyone traces the Reddit thread's 70 percent figure to width, height or layout choices.
Clarity's read
What the record supports and how the coverage leans. The claims behind it follow.
Reality
- Evidence45
- Adoption
- Insufficient
- Hype gap−10
- Incentives
- Insufficient
- Confidence40
Claim ledger
Ranked by verification strength, evidence, and original report placement.
- [1]
Apple publishes physical pixels only. The inner display is 1878 x 2670 and the outer one is 1398 x 2034.
- [2]
Dividing Apple's physical pixels by the usual iPhone pixel ratio of 3 gives the commonly quoted width estimates.
- [3]
The open device is wider than it is tall (164.6 mm by 117.8 mm), which is why most write-ups quote 890 as the unfolded width.
- [4]
Pre-orders for the iPhone Duo open October 16.
- [5]
The iPhone Duo goes on sale October 23.
- [6]
At 890px, Tailwind and Bootstrap both serve their md (768px) tier, which most teams treat as tablet portrait.
- [7]
At 626px, Tailwind's first step (sm, 640px) does not fire, so a 7.6-inch screen gets the exact CSS of a 6.3-inch iPhone.
- [8]
In September, a post titled "Dear God websites look horrible on iPhone Duo" reached the top of r/webdev and passed 3,000 upvotes; it said that with the phone closed, sites were using about 70% of the screen.
- [9]
The post's DevTools script lists every width breakpoint in same-origin stylesheets, skips cross-origin sheets and counts them; if the skipped count is above zero, the list is incomplete.
- [10]
The script keeps widths from media rules with a width condition and multiplies non-px values (em, rem) by 16 to get pixels.
- [11]
The post says to check where 382, 466, 626 and 890 fall among a site's breakpoints; if two of them hit the same tier and the layout looks wrong at one, that is the first bug.
- [12]
The post says not to fix this with @media (width: 890px) because the next foldable will ship different numbers, and to move the boundary to wherever content starts to look cramped or stretched.
- [13]
Container queries answer how wide a card is and keep working in Split View, where the page might be half the inner screen.
- [14]
The post's example uses @container cards (width >= 34rem) to switch a card to grid-template-columns: 12rem 1fr.
- [15]
At 890px, plenty of sites switch to a desktop nav that usually opens on :hover; on a touch screen hover is emulated with an awkward tap, so the mega menu either flickers or never opens.
- [16]
The post recommends gating hover behaviour on the input type.
- [17]
"Treat the table as a test plan. Never treat it as a breakpoint list."
- [18]
The inner display's shorter side, 1878 physical pixels, divides by 3 to 626 points.
- [19]
Tailwind's sm step at 640 is 14 points above 626.
- [20]
A 34rem container threshold is 544 px, assuming a 16 px root font size (the factor the post's script uses).
- [21]
Half of the 890-point unfolded width is 445 points, below the 544-point threshold.
- [22]
Pre-orders open seven days before the October 23 on-sale date.
- [23]
Safari on the Duo keeps a strip of controls down the right edge.
- [24]
One design studio, working in Apple's iOS 27.1 simulator, measured the outer screen's web view at 466 points but the layout viewport at 382.
- [25]
Because of the Safari control strip, innerWidth may be smaller than every number in the post's width table.
- [26]
vh maps to the large viewport, the size with browser UI retracted; on a 678px-tall outer screen, a 100vh hero with a headline, a subhead and a button can push the button below the fold.
- [27]
The post's rule is svh for marketing heroes, dvh for full-screen app shells, and vh almost nowhere.
- [28]
The same studio reported 100vh resolving to 598 on a 678px outer screen in the simulator, and said no CSS unit matched the visible height under Safari's floating toolbar.
- [29]
The post advises opening your hero in the simulator and looking before you trust any unit.
- [30]
The layout viewport is 84 points narrower than the 466-point web view.
- [31]
The 382-point layout viewport is about 82 percent of the 466-point web view's width.
- [32]
A 100vh reading of 598 is 80 points below the 678-point outer screen height.
- [33]
Almost nobody owns the device yet, so the checklist assumes no access to one.
Sources
1 independent publisher whose own reporting we read for this story.
- dev.toThe iPhone Duo Web Checklist: 9 Things to Verify Before October 23
1 article · October 13, 2026
Topics and entities
Follow any of these and your For You feed starts watching them — no settings page required.