iPhone Duo for web developers: viewport sizes and Safari

On the iPhone Duo's outer screen, your website gets about 382 CSS pixels of width, not the 466 the screen measures, because iOS 27 keeps an 84-point system strip down the right edge. Unfolded, the inner screen is 951 × 669 in landscape, and Safari gives your page the full width with a toolbar across the top. Apple publishes no point sizes for the strip, so these figures were measured in Apple's iOS 27.1 simulator, not on hardware.

The iPhone Duo at a glance

On iPhone, one point equals one CSS pixel, so point sizes are what your media queries see.

Apple's App Store screenshot sizes back up the screen sizes: 1398 × 2034 pixels for the outer screen and 2853 × 2007 for the inner one, exactly the point sizes times three. What Apple doesn't publish is the size of the strip or what Safari does with it, and that's where the simulator comes in.

Device pages: iPhone Duo outer screen and iPhone Duo unfolded, plus the screen-size pages for 466 × 678 and 951 × 669.

The outer screen: 466 wide, 382 for your page

The vertical bar

In portrait, iOS 27 keeps a permanent 84-point strip on the right-hand (trailing) edge of the outer screen. Apple's design guidance for iPhone Duo calls it the vertical bar. It holds:

• the camera and the Dynamic Island,
• the status bar, with the time,
• the current app's toolbar. In Safari that's Back, Bookmarks, New tab and Tabs.

Web pages never draw into it: your layout viewport stops at the strip's edge, about 382 CSS px wide. The hinge runs down the opposite, left edge, which is why the outer screen's corners are square on that side.

Safari's address field floats over your page

There's no address bar at the top. Safari's address field is a pill that floats over the bottom of the page. Anything you pin to the bottom of the screen (a sticky "Buy" bar, a cookie banner, a chat bubble) can end up underneath it. Safari's exact innerHeight here hasn't been read yet, so leave generous space at the bottom and check it visually.

What 382 px means in practice

382 is narrower than every current iPhone: the iPhone 17e is 390, the iPhone 18 Pro 402 and the iPhone 18 Pro Max 440. Narrower screens do exist: the older 375 px iPhone SE and minis, 360 px Android phones like the Galaxy S25, and anyone using a larger-text display setting.

If your site already works at 360 and 375, 382 won't scare it. If you only ever tested at 390 or 402, look for:

• fixed widths or min-width values between 383 and 402 px on pricing cards, modals, tables or images,
• side padding plus a fixed-width child that adds up to more than 382,
• rows of buttons or tabs that fit exactly at 390 and don't wrap.

Any of these makes the page scroll sideways. Fix horizontal scrolling on mobile walks through finding the culprit, and mobile padding that works keeps text off the edges.

Turned sideways

In landscape, the strip stays on the camera's short edge, so a page gets about 678 − 84 = 594 px of width. That figure is calculated, not observed in the simulator.

The inner screen: 951 × 669, landscape by nature

Open the Duo like a book and you get a 7.6-inch screen whose natural orientation is landscape: 951 × 669 points at 3x. You may see 890 × 626 quoted on some sites; that figure is wrong.

What's different here:

• No side strip. Safari turns the vertical bar off on the inner screen and uses an iPad-like toolbar across the top instead (Back, Bookmarks, the address field, New tab, Tabs and the clock), about 80 points tall. Your page gets the full 951 px of width and, going by simulator screenshots, roughly 589 px of height.
• No camera hole. The camera sits under the display, so there's no notch or island to design around.
• A crease down the middle, at about x = 475.5.
• No split at the fold. Safari treats the whole screen as one viewport. The Viewport Segments and Device Posture APIs, which could tell a page about the fold, aren't available: Safari doesn't support Viewport Segments, and Device Posture is off by default.

For your CSS, that means:

• @media (orientation: landscape) matches, even though nobody rotated anything.
• 951 px is above the common 768 px tablet breakpoint but below Tailwind's lg (1024) and Bootstrap's lg (992), so visitors get your tablet layout. See responsive breakpoints in 2026.
• About 589 px is short. A 100vh hero or a tall sticky header eats most of it, so use svh or dvh (the 100vh fix).

Because the crease is dead centre, a two-column layout with its gap in the middle keeps text off the fold naturally, while a single centred image or video straddles it. That's a nice touch, not a rule: fully open, people read across the crease fine.

What isn't known yet

These are simulator measurements, and some things haven't been pinned down:

• Safari's exact innerHeight on the outer screen, with the floating pill.
• The outer screen in landscape. The 594 px width is a calculation.
• What env(safe-area-inset-right) reports next to the strip.
• Whether real hardware matches the simulator in every detail.

Treat the numbers as careful estimates until someone reads them with JavaScript on a real device.

How to get your site ready

1. Test at 382 px wide. In doesitfit, the "iPhone 18 & Duo" set loads the iPhone 18 Pro, 18 Pro Max and both Duo screens with mockups on, strip included. In browser DevTools, add a custom device 382 px wide.

2. Don't assume screen.width equals your layout width. On the outer screen the display is 466 points wide, but your page is about 382. Lay out with media queries and container queries, and in JavaScript measure the page, not the screen:

   // Follows the space your page actually has
   const narrow = window.matchMedia('(max-width: 400px)').matches;
   const pageWidth = document.documentElement.clientWidth;
   
   // Risky on the Duo: describes the screen, not your page
   const screenWidth = screen.width;
   

3. Don't build around env(safe-area-inset-right) yet. Keep your normal safe-area code (viewport-fit=cover plus env(safe-area-inset-*) padding), but don't write Duo-specific rules based on guesses about what it reports next to the strip.

4. Leave room at the bottom for Safari's floating address pill, and check sticky footers with Browser bars turned on.

5. Treat the inner screen as a short landscape tablet. Keep key content within the first 589 px or so, and check your 768 to 1023 px layout at 951 × 669.

6. Test the switch. Opening the phone takes your page from about 382 to 951 px wide. Web design for foldable phones covers handling that change without losing state.

If an AI wrote your site, this prompt covers the outer screen:

Make my site work on the iPhone Duo's outer screen, where web pages are 382px wide. Find anything with a fixed width or min-width above 380px, and any row of buttons or tabs that doesn't wrap, and make them fluid. Don't change how the site looks at 390px and wider.

What to remember

• Outer screen: design for 382 px, not 466.
• Inner screen: a 951 × ~589 landscape page, one viewport straight across the crease.
• The numbers come from Apple's iOS 27.1 simulator; Safari's exact heights are still unknown.
• Test both screens, and the jump between them, alongside the rest of the iPhone lineup and other foldables.