iPhone Duo and Foldable Phones: What Changes for Web and App Design

Apple’s first foldable goes on sale on October 23, 2026, and it is not just a bigger iPhone. The iPhone Duo opens from a 5.4 inch phone into a 7.6 inch screen that is wider than it is tall, and both screens have a shape no iPhone has had before. That changes which layout your website serves, how your app fills the screen and what “mobile” means in a design review. This guide covers what the Duo is, what it changes for websites and apps, and the checklist we are using on client projects this month.

What Apple announced

Apple unveiled the iPhone Duo on September 9, 2026. Pre-orders opened on October 16, and the phone launches on October 23 in the US and more than 70 other countries and regions, including Australia and the UK, with 28 more on October 30. It starts at $1,999 for 256GB.

The viewport figures are developer estimates based on the screen resolution at 3x scaling. Safari’s toolbars make the usable area a little smaller, so measure on a real device before you set anything in stone.

Why foldables matter even at 2% of phones

Foldables are still a small share of the market. Counterpoint Research puts them at about 2% of smartphones, with cumulative shipments passing 100 million by the end of 2026. What changes the picture is who buys them. Counterpoint expects Apple to take about 25% of the foldable market in 2026 and about 40% in 2027, behind only Samsung this year.

For SaaS companies, that matters more than the raw share suggests. A $2,000 phone ends up in the hands of founders, executives and the early adopters who make software buying decisions. If your pricing page breaks on their new phone, they will notice.

What changes for websites

Breakpoints land in the wrong place

Most responsive sites switch layouts on viewport width. Opened, the Duo reports a width of about 890 pixels. That puts it inside the tablet range of most frameworks:

• Webflow: the default Tablet breakpoint covers 768 to 991 pixels, so the open Duo gets your Tablet design. Folded, at about 466 pixels, it gets Mobile Portrait.
• Framer: the default Tablet breakpoint starts at 810 pixels, so the open Duo sees your tablet layout.
• Custom code: anything that treats “wider than 768 pixels” as desktop will serve a desktop layout to a phone held in one hand.

The open screen is also short. At about 626 pixels tall, a sticky header plus a full-height hero leaves very little room for the headline and call to action.

Hover menus fail on a touch screen

At 890 pixels, many sites show their desktop navigation, and desktop navigation often relies on hover dropdowns. The Duo has no mouse. Gate hover effects with @media (hover: hover) and (pointer: fine), and make every menu open on tap.

Safari cannot see the fold

Chrome 138 added the Viewport Segments API, which lets a page place content on either side of a fold on Android foldables. Safari on the iPhone Duo supports neither that nor the Device Posture API at launch, and WebKit has not taken a position on either proposal. Because the Duo identifies as an iPhone, user agent checks will also serve it phone layouts. Treat fold-aware layouts as a future enhancement, not a requirement.

The viewport changes while the page is open

Opening the phone or resizing a Split View pane resizes the page without a reload. Code that reads window.innerWidth once at load, or sizes a hero with 100vh, will look broken after the first fold.

A website checklist for the iPhone Duo

1. Test at 466 and 890 pixel widths as custom devices in Chrome DevTools, then on a real Duo or a friend’s.
2. Make navigation work by touch at tablet widths. No hover-only dropdowns, and tap targets of at least 24 by 24 pixels.
3. Use dynamic viewport units. Replace 100vh with 100dvh and cap hero heights so the call to action stays visible on a 626 pixel tall screen.
4. Prefer container queries for cards and components, so they respond to the space they actually get rather than the screen width.
5. Listen for resizes. Use ResizeObserver or resize events instead of measuring once at load.
6. Respect safe areas separately. Add viewport-fit=cover if you draw to the edges, and set left and right env(safe-area-inset-*) values independently, because they differ on this device.
7. Keep critical controls out of the center band of the open screen, where the crease is.
8. Check your Webflow Tablet and Mobile Portrait designs as seriously as Desktop. On the Duo, those breakpoints become primary layouts.

“On the iPhone Duo, your tablet layout becomes a phone layout. Treat it like one: thumb reach, tap targets and a call to action above the fold.”

What changes for iOS and cross-platform apps

Apple’s developer guidance for the Duo is clear about the direction: stop designing for fixed iPhone sizes.

• Build with the iOS 27.1 SDK. Apps built with older SDKs still run, but leave unused space beside the status bar on the inner display. Apps built with iOS 27.1 extend to the screen edge, and standard toolbars can lay out vertically.
• Use size classes, not screen sizes. The outer screen behaves like other iPhones. The inner screen is regular width and regular height, the same class as an iPad, which leaves room for sidebars and split views.
• Stop using UIScreen.main. On a phone with two screens it is ambiguous and is being deprecated. Read sizes from the window scene, trait collection or environment.
• Handle reserved regions. New ReservedRegion APIs in SwiftUI and UIKit tell custom views where the fold and camera cutouts are, so edge-to-edge designs do not collide with them.
• Expect Split View. Two apps can run side by side on the inner screen, so your app must work at partial widths.
• Test in the simulator. Xcode 27.1 includes an iPhone Duo simulator with controls to open, close, rotate and fold the device.

Flutter and React Native apps run inside a native iOS shell, so the same principles apply. Build layouts from available constraints, with tools like LayoutBuilder and MediaQuery in Flutter, instead of assuming a phone width, and test every screen in the iPhone Duo simulator before your next release.

What to do this week

If you run a SaaS marketing site, spend an hour testing your homepage, pricing page, signup flow and navigation at 466 and 890 pixel widths. Most fixes are CSS, not redesigns. If you ship an iOS or Flutter app, plan a release built and tested against iOS 27.1, starting with the screens your customers use most.

Want your site and app checked on the iPhone Duo? We test at every breakpoint and fix layouts that break on foldables.Explore Website & App Design

Sources

• Apple announces foldable iPhone Duo, MacRumors, September 2026
• iPhone Duo pre-orders and release date, MacRumors, October 2026
• iPhone Duo, Wikipedia
• Prepare your app for iPhone Duo, Apple Developer Tech Talks
• What iOS developers need to change for the iPhone Duo, InfoQ, September 2026
• Websites on iPhone Duo: Safari can’t see the fold, September 2026
• iPhone Duo folded and unfolded viewport data, WebMobileFirst
• Apple shipped a foldable iPhone. Safari still can’t tell you it folded, DEV Community
• Counterpoint: Apple’s foldable iPhone set to grab 25% share in 2026, September 2026