Apple’s iPhone Duo, its first folding iPhone, went on sale October 23, 2026, and it shipped with Safari 27.1. WebKit says sites built with standard responsive techniques should work on it without changes. The work for agencies is testing, because one phone now covers viewport widths from 382 to 951 CSS pixels.
This post covers what the device looks like to a web page, what WebKit and Apple say to do, the folding APIs that are still behind feature flags, and a test plan you can run in Xcode without buying the phone. It is product reporting only. We are not reviewing the phone or telling anyone to buy it.
The short version: if your site already handles phones, tablets and narrow desktop windows with media queries, Grid and Flexbox, it should hold up. Test the five viewport shapes WebKit lists, check anything that sniffs the user agent, and treat the new folding APIs as optional extras. They are off by default in Safari 27.1.
What Apple shipped with the iPhone Duo
Apple’s September 9 announcement set the dates. Pre-orders opened October 16, and sales started October 23 in more than 70 countries and regions. Apple said 28 more countries and regions would follow on October 30. The phone ships with iOS 27.1.
The device has two screens. According to Apple’s technical specifications page, the outer display is 5.4 inches at 1398 by 2034 pixels. The inner folding display is 7.6 inches at 1878 by 2670 pixels. Both refresh at up to 120Hz.
Two other details matter for web teams. Apple’s announcement says Split View lets people run two apps side by side on iPhone for the first time. It also says people can open a second window of the same app, and it names Safari as an example. So a visitor on the iPhone Duo may see your site in half the inner screen, next to another page.
The five viewport shapes on the iPhone Duo
WebKit’s Safari 27.1 feature post, written by Jen Simmons and published on launch day, opens with: "Today iPhone Duo arrives, and with it, Safari 27.1." It then lists the viewport sizes in CSS pixels. The range runs from 382 to 951 wide and 368 to 902 tall.
| How the phone is held | Width | Small viewport height (svh) | Large viewport height (lvh) |
|---|---|---|---|
| Outer display, portrait | 382 | 580 | 618 |
| Outer display, landscape | 594 | 368 | 406 |
| Inner display, portrait, one window | 669 | 867 | 902 |
| Inner display, landscape, one window | 951 | 585 | 620 |
| Inner display, two windows side by side | 385 | 571 | 609 |
Figures are from WebKit’s post as of early November 2026. The small and large heights differ because the tab bar shrinks when the user scrolls.
Three rows deserve attention. The 368-pixel height on the outer landscape view is short, so sticky headers, cookie banners and chat widgets can eat most of the screen. The 669-pixel inner portrait width falls between common phone and tablet breakpoints. And the 385-pixel split view means a large screen can still show your phone layout.
WebKit also notes where Safari puts its controls. On the outer display, the tab bar sits at the bottom by default. On the inner display, it sits at the top.
What WebKit tells developers to do
The guidance is short. WebKit says sites built with "modern responsive web design techniques" will work well. It points to media queries, flexible layouts, CSS Grid and Flexbox.
The most direct line in the post is this one: "Avoid UA sniffing to detect devices, and use feature detection instead." That matters for older client sites. Some themes and plugins still read the user agent string to pick a "mobile" or "tablet" template. On a phone that changes shape in the user’s hand, that guess will be wrong part of the time.
Apple gives native app developers the same advice on its iPhone Duo developer page. It says: "Don’t treat ‘regular width’ as ‘iPad.’" It also warns that a fold can resize an app in the middle of a session. The web version of that rule is simple. Base layout on the space you have right now, not on what device you think it is. If your JavaScript measures the window once on load, make sure it also listens for resize.
Our guide to browser engines in 2026 explains why Safari on any iPhone means WebKit, including the iPhone Duo.
How to test the iPhone Duo without the phone
You do not need the device. WebKit’s post says: "You don’t need iPhone Duo in hand to test your website or web app." Xcode 27.1 or later includes Device Hub, which can create and run an iPhone Duo simulator.
Apple’s October 5 developer news post says Xcode 27.1 "adds development support for iPhone Duo." It also says Device Hub shows how apps behave "across all poses and orientations."
A practical test plan for a client site:
- Open the site in the iPhone Duo simulator on the outer display, portrait and landscape.
- Unfold to the inner display and check portrait and landscape again.
- Open a second Safari window side by side and check the 385-pixel view.
- Fold and unfold with a long page scrolled halfway. Check that the reader stays in place and nothing jumps.
- Open the main menu, a modal and a form in each shape, then fold or unfold while they are open.
- Load any page that embeds a PDF or links to one.
Resizing a desktop browser gets the widths right. It will not show the fold, the moving tab bar or the split view. Our post on Chrome’s two-week release cycle covers how to fit more browser checks into a QA schedule.
Where breakpoints can go wrong on the iPhone Duo
These patterns tend to break when a viewport changes shape mid-visit.
Width-only device guesses. A rule like "under 768 pixels is a phone" sends the inner portrait view (669 wide) to a phone layout. That may be fine. Check that it does not look stretched, with oversized images and very long lines of text.
Short landscape heights. At 368 pixels tall, a sticky header plus a cookie banner leaves little room. Test the outer landscape view with every overlay showing.
Height units. WebKit’s table lists both small and large viewport heights. If you set full-screen sections with 100vh, consider svh or dvh so content is not hidden under the tab bar.
Script that caches the layout. Carousels, sticky elements and menus that measure the page once can break after a fold. Listen for resize events or use container queries and CSS instead of measured pixel values.
Block-level visibility rules. If you hide blocks per breakpoint in WordPress, as described in our WordPress 7.0 responsive block visibility guide, check which blocks appear at 382, 669 and 951 pixels.
The folding APIs are behind feature flags
Safari 27.1 includes two newer web APIs for folding screens. WebKit says: "Both are supported in Safari 27.1 on iPhone Duo as a developer preview behind feature flags." They are off for normal visitors.
Do not build features that depend on these APIs yet. In Safari 27.1 they only work after the user turns on feature flags. WebKit also says they may still change. Use them only as an extra layer on top of a layout that already works without them.
To try them, turn on "Device Posture API" and "Viewport Segments API" under Settings > Apps > Safari > Advanced > Feature Flags.
The Device Posture API reports how the phone is held. The device-posture media query and navigator.devicePosture.type return folded when the phone is partly folded, in a book or laptop pose. They return continuous when it is flat, either fully open or fully closed. Scripts can listen for a change event.
The Viewport Segments API tells you where the fold splits the screen. The horizontal-viewport-segments media query matches book pose, and vertical-viewport-segments matches laptop pose. Environment variables such as viewport-segment-width and viewport-segment-left give the size and position of each segment. In JavaScript, window.viewport.segments returns one rectangle per segment.
A sensible first use is small, such as a two-column article layout in book pose so text does not run across the hinge. WebKit’s own example uses @media (device-posture: folded) to switch to a two-column grid.
PDFs and the space behind Safari’s controls
Two smaller changes in Safari 27.1 affect content teams. When the iPhone Duo is partly folded in book pose, Safari shows PDFs as two pages side by side. Open it flat or close it, and Safari goes back to one page. Associations and agencies that publish reports as PDFs may want to check how spreads look. If you are already fixing PDFs for accessibility, our accessible PDF checklist is a good companion.
The second change is about the outer display. There, iOS moves some controls to the side of the screen. WebKit says: "In Safari 27.1, web content does not currently extend to fill the space behind these controls." Safari fills that space with the page’s background color instead.
WebKit says viewport-fit="cover" could extend pages into that space, but notes many sites do not inset all four edges correctly. The team says it is looking for a better approach. For now, set a page background color that looks right at the edges. Do not add viewport-fit="cover" just for this phone unless your site already handles safe areas on all four sides.
What to put on your QA calendar
For most agencies, this is one test pass per active client site, then a standing row in the device matrix next to a standard iPhone, an iPad and a narrow desktop window.
If you keep a release calendar like our Q4 2026 platform calendar, add two follow-ups. First, watch WebKit’s blog for changes to the folding APIs and the controls behavior. Second, review client analytics in a month or two to see whether the new device shows up in meaningful numbers. Apple’s developer news post also says that starting April 2027, apps submitted to the App Store must include iPhone Duo screenshots. That applies to native apps, so it matters if you build or maintain a client’s iOS app.
Frequently Asked Questions
When did the iPhone Duo go on sale?
Apple says pre-orders opened October 16, 2026, and sales began October 23 in more than 70 countries and regions. Apple listed 28 more countries and regions starting October 30.
Which Safari version does the iPhone Duo run?
Safari 27.1, which shipped with the device on October 23. The phone runs iOS 27.1.
What viewport widths should we test for the iPhone Duo?
WebKit lists 382 pixels (outer portrait), 594 (outer landscape), 669 (inner portrait), 951 (inner landscape) and 385 (two windows side by side). All are CSS pixels.
Do we need to change our responsive site for the iPhone Duo?
WebKit says sites built with modern responsive techniques should work. Test the five shapes, and fix anything that relies on user agent sniffing or fixed heights.
Can we test without buying the phone?
Yes. Xcode 27.1 or later includes Device Hub, which can run an iPhone Duo simulator.
Are the Device Posture and Viewport Segments APIs on by default?
No. In Safari 27.1 they are a developer preview behind feature flags. Turn them on under Settings > Apps > Safari > Advanced > Feature Flags.
Should we use the folding APIs on client sites?
Only as an optional extra. Most visitors will not have the flags on, and WebKit says the APIs may still change. Your base layout must work without them.
Why do PDFs look different on the iPhone Duo?
When the phone is partly folded in book pose, Safari 27.1 shows PDFs as two pages side by side. Flat or closed, it shows one page.
Does web content fill the edge of the outer screen?
Not in Safari 27.1. Safari fills the space behind side controls with the page background color. WebKit says it is looking at a better approach.
