Apple's iPhone Duo: what a folding phone means for your website

TLDR: Apple's first folding phone, the iPhone Duo, gives Safari three screen shapes your website has never seen: a short, wide outer display, a near-A4 inner display, and a split view that puts your product page next to a competitor's. None of it needs a rebuild. All of it rewards sites built on fluid layouts rather than fixed breakpoints, and punishes the ones that guessed the screen was tall.

Apple announced the iPhone Duo on Wednesday. It opens like a book, costs from £1,999 in the UK, and goes on sale on 23 October. Most of the coverage is about the hinge. The more useful question for anyone who runs a website is simpler: what does Safari see when someone opens one?

The honest answer is three different things, depending on how the phone is being held. That is new. Every iPhone since 2007 has been a tall rectangle, and a great deal of web design quietly assumes it. Here is what changes, and what we'd check first.

Screen one: closed, and shorter than you think

Closed, the Duo is about the size of a passport, with a 5.4-inch outer display. Apple says it gives 90 percent of the screen area of an iPhone 18 Pro, which sounds like business as usual. The shape is not. The panel is 1398 by 2034 pixels, and at Apple's usual 3x scale that works out to roughly 466 CSS pixels wide by 678 tall. Apple hasn't published the CSS figures yet, so treat those as an educated estimate. For comparison, an iPhone 18 Pro is 402 by 874.

So the outer screen is wider than any iPhone ever made and about 200 pixels shorter. That has two practical effects. Your "above the fold" area just lost a fifth of its height, so a hero section built to fill a tall phone screen now shows less of itself before someone scrolls. And any layout that uses 100vh to size a full-screen panel gets a squat, wide box rather than the tall portrait frame it was designed around. Headlines wrap differently at 466 pixels than at 402, product cards in a two-column grid get noticeably wider, and a three-column grid becomes plausible on a phone for the first time.

Screen two: open, and shaped like a sheet of paper

Open, the 7.6-inch inner display is 1878 by 2670 pixels, which at 3x is about 626 by 890 CSS pixels. Both displays share the same aspect ratio, roughly 1.42, which is close to the ratio of an A4 sheet. That is a very different canvas from the 19.5:9 slab of a normal phone. Apple's own line is that the two screens share a shape so content scales proportionally when the phone opens.

For a website, an 890-pixel-wide viewport is tablet territory. Shopify's Dawn theme switches to its medium layout at 750 pixels and its large layout at 990. A Duo held open like a book lands squarely in the tablet layout, and held portrait at 626 wide it drops back to mobile. The same person will cross that breakpoint every time they open or close the phone. If your tablet layout assumes a mouse, that is where the trouble starts. Mega menus that open on hover, tooltips that only reveal on mouseover, and galleries with hover-to-zoom all get served to a device that has no hover at all. Width was always a poor proxy for input. The Duo makes it an actively wrong one.

Screen three: split view, and comparison shopping

The change that matters most for ecommerce is not a screen at all. iOS 27 on the Duo lets people run two apps side by side, and Apple's press release specifically calls out opening two Safari windows "for comparison shopping". Each window gets roughly 445 CSS pixels of width. Your product page will sit, quite literally, next to somebody else's.

That is a design brief in itself. In a 445-pixel window, what does a shopper see without scrolling? Ideally the product, the price, the delivery promise and one reason to believe, whether that is a review count or a guarantee. If the first screen is a full-bleed lifestyle image with the price two scrolls down, the site next door wins. It also means your page has to survive being resized live. Someone dragging the divider between two windows, or folding the phone mid-session, is resizing your layout in real time. Sites that jump awkwardly between breakpoints will feel broken. Sites built on fluid grids and container queries will feel like they were made for it.

What Apple told its own developers

Apple published design guidance for app developers on the day of the keynote, and the advice translates directly to the web. The core instruction from Apple's design team was to stop building around fixed widths, breakpoints or anything tied to one particular screen. Design for two widths, compact and regular, and let the system pose the app. Scrolling content doesn't need to avoid the fold. Interactive elements do, because buttons that land in the crease are hard to tap.

Read that as a web designer and the checklist writes itself. Sticky add-to-cart bars and centred modals are the elements most likely to straddle the fold when the phone is half open. Long-form content, collection grids and product descriptions are fine as they are. And anything positioned with fixed pixel values, rather than relative to the viewport or its container, is the thing to look at first.

What we'd actually do about it

Nobody should rebuild a site for a phone that starts at £1,999 and isn't out yet. But the people who buy one are, by definition, high-value customers, and for premium brands they are exactly the customer you least want to lose to a clumsy layout. So the work is an audit, not a redesign.

Open Safari's Responsive Design Mode on a Mac and add four custom sizes: 466 by 678 for the closed phone, 626 by 890 and 890 by 626 for the open one, and 445 by 626 for a split-view window. Then drag the width slowly between them and watch what happens. Check that your hero still makes its point in a short, wide frame, and that no headline or price is baked into an image that gets cropped. Swap any hover-only interaction for one gated on the pointer and hover media queries rather than screen width. Replace 100vh sizing with content-driven minimum heights. Look at the product page in the narrow window and ask whether it would win a comparison. Then check your sticky elements and modals while resizing, because those are the ones that will land on the crease.

Most of this is responsive web design as it was always meant to be practised, and we'd recommend it regardless of the Duo. Fluid layouts, input-aware interaction and honest above-the-fold content have been the right answers for years. What the Duo does is remove the excuse. For two decades the phone was a tall rectangle and a lot of sites got away with designing for exactly that. From 23 October, some of your best customers will be carrying a passport-shaped one that turns into a sheet of paper, and your website will be the first thing they open.

Photos by The Paris Photographer and Collins Lesulie on Unsplash