# What the foldable iPhone Duo means for your website

By Sindhur Dutta, Creative Director, BUNQ LABS. Published 5 October 2026.
Canonical: https://bunqlabs.com/insights/iphone-duo-foldable-what-it-means-for-your-website

> Apple's first foldable iPhone changes shape in the hand. Here is what that means for layouts, 3D scenes and testing, and what to fix on your site now.

## Key takeaways

- The iPhone Duo is Apple's first foldable iPhone: a book-style phone with a 7.6-inch inner display and a 5.4-inch outer display, on sale from 23 October 2026.
- With iOS 27.1, iPhone gets Split View for the first time, so your site may be shown in half the screen of Apple's biggest iPhone.
- Design fluid layouts that respond to the space they are given, not to a list of device sizes.
- Any 3D or WebGL scene must cope with the viewport changing shape in the middle of a visit, without breaking or reloading.
- Test on real devices and real window sizes, because emulators rarely show how a fold or a split behaves in the hand.

The iPhone Duo means your website's biggest iPhone screen may now behave like its narrowest. A visitor can unfold it to a near tablet, fold it shut mid-scroll, or split it between two apps. The fix is not a new breakpoint for one more device. It is a layout, and any 3D scene inside it, that adapts to whatever shape it is given at any moment.

Below is what Apple announced, what it means for websites, and what we would check first.

## What did Apple announce?

Apple unveiled the iPhone Duo on 9 September 2026 at its "Surprise and Shine" event. It is Apple's first foldable iPhone, and it folds like a book. You can read the details in [Apple's announcement](https://www.apple.com/newsroom/2026/09/apple-unveils-iphone-duo/).

The key facts for anyone who builds or commissions websites:

- **Two screens.** A 7.6-inch inner display (1878 by 2670 pixels, 430 ppi) and a 5.4-inch outer display (1398 by 2034 pixels, 460 ppi).
- **Same shape, different size.** Apple says both displays share the same aspect ratio, so content scales proportionally when you fold or unfold.
- **Split View on iPhone.** It ships with iOS 27.1, which brings Split View, two apps side by side, to iPhone for the first time. Apple says apps adapt as you fold and unfold.
- **Price and dates.** From $1,999 for 256GB in the US. Pre-orders open on 16 October, and it goes on sale on 23 October 2026 in more than 70 countries.

It launched alongside the iPhone 18 Pro and 18 Pro Max, as [TechCrunch reported](https://techcrunch.com/2026/09/09/apple-unveils-its-first-foldable-the-iphone-duo/). The Duo is the expensive, early adopter model, which may make its owners exactly the audience premium brands want.

## How big is the iPhone Duo screen for a website?

A website does not see raw pixels. It sees CSS pixels, the layout units the browser uses. iPhones usually draw three screen pixels for every CSS pixel, a "3x" scale.

Dividing the panel resolutions by that usual 3x scale gives a rough estimate. Developers have reported roughly 466 by 678 CSS pixels folded, and 890 by 626 unfolded. These are estimates, not official figures.

The interesting number is the unfolded width. At close to 900 pixels wide and shorter than it is wide, the open Duo sits where many sites switch from a phone layout to a tablet or small laptop layout.

## Why might the biggest iPhone screen act like the narrowest?

Split View. When a visitor puts Safari next to another app, your site gets only part of the screen.

Developers have reported that each Safari window in Split View is about 445 CSS pixels wide. That is narrower than the folded phone. So the iPhone with the largest screen Apple makes can show your site in a column thinner than a standard iPhone.

This is the heart of it. A site that decides its layout by guessing the device will guess wrong, whether it assumes "phone" on an 890 pixel wide screen or "big screen" on one split in half.

## Can a website detect when the phone is folded?

Not directly, for now. There are web standards designed for this. The Viewport Segments API reports where a fold or hinge sits on the screen. The Device Posture API reports whether a device is folded.

At the time of writing, developers report that Safari supports neither. [One developer's write-up](https://dev.to/keishin_nishiura/apple-shipped-a-foldable-iphone-safari-still-cant-tell-you-it-folded-565a) sums it up in its title: Apple shipped a foldable iPhone, and Safari still cannot tell you it folded.

Our take: do not wait for it. Even if those APIs arrive, a site that relies on knowing the posture is fragile. What a site can always read is the size of the space it has. Design for that.

## How should you design for a foldable phone?

Design fluid, fold-agnostic layouts. Fold-agnostic means the layout does not care whether a fold exists. It only cares how much room it has.

In practice, that means a few habits:

- **Respond to space, not devices.** Use breakpoints based on where your content starts to look cramped, not on a list of phone models. A new phone then needs no new code.
- **Use container queries where they help.** A container query lets a component, such as a product card, change its layout based on the space its own box has, rather than the whole screen. This is ideal when the same card appears in a sidebar and in a full width grid.
- **Plan for wide and short.** The open Duo is wider than it is tall. Hero sections built for tall phone screens, with the key message near the bottom, can push that message out of view. Check that headlines and calls to action still sit in the first screen.
- **Keep tap targets generous.** A larger screen does not mean a mouse. Buttons still need to suit a thumb.

None of this is new. The Duo simply punishes the shortcuts that used to get away with it.

## What happens to a 3D or WebGL scene when the phone folds?

This is where foldables bite hardest. WebGL is the technology that lets a browser draw real time 3D graphics. A WebGL scene draws into a canvas, a fixed rectangle of pixels, through a virtual camera with a set shape.

If the viewport changes and the scene does not respond, you get a stretched image, a cropped subject, or a canvas that no longer fills the screen. On a foldable, that change can happen mid-visit, in the middle of an animation, every time someone opens or closes the phone or drags a Split View divider.

A well built scene handles it calmly:

- **Resize the canvas and camera on every viewport change.** The camera's aspect ratio must match the new shape, or everything distorts.
- **Reframe, do not just scale.** A product that sits centred in a tall frame may need the camera to move back, or the composition to shift, in a wide one. Decide what must always stay in view.
- **Never reload or restart.** The visitor's place in the story, their scroll position and any choices they made should survive the change.
- **Watch the pixel budget.** Unfolding roughly doubles the number of pixels a scene has to draw. On a phone, more pixels means more work for the GPU, the graphics chip. A scene that watches its own frame rate and lowers detail when needed copes far better. We wrote about how we do this in [how to make a WebGL website run smoothly on cheap, old phones](/insights/fast-webgl-websites-on-budget-phones).

At BUNQ LABS, we build immersive WebGL websites, including [Why Zero](/projects/why-zero), which won Site of the Month at Awwwards and the FWA. On every build, we treat a resize as a normal event to design for, not an edge case to patch.

## How should you test your website for the iPhone Duo?

Test on real devices and real window sizes. Browser tools can mimic a screen size, but they rarely show how a fold or a split feels in the hand, or how a 3D scene behaves on a real phone's GPU. A short test plan:

1. Load the site folded, then unfold it mid-scroll. Does the layout reflow cleanly?
2. Open the site in Split View and drag the divider. Does anything overflow or overlap?
3. Fold and unfold during any animation or 3D scene. Does it stretch, stall or restart?
4. Check that the main message and call to action are visible on the first screen in every shape.
5. Fill in a form, fold the phone, and check that nothing typed is lost.

If you do not have a Duo yet, test the same sizes in a desktop browser by resizing the window live, and make sure a resize mid-visit never breaks anything. That covers most of what the Duo will throw at you.

## What should you do now?

Most sites need checks, not a redesign. If your site picks layouts by device type, or has a WebGL hero that assumes a fixed screen, fix that first.

If you are deciding whether 3D belongs on your site at all, our guide on [whether your brand needs an immersive 3D website](/insights/does-your-brand-need-an-immersive-3d-website) is a good place to start. You can see the kind of work we take on on our [services page](/services).

If you want your site checked against foldables and split screens before the Duo reaches your customers, [get in touch](/contact).

## Frequently asked questions

### Do I need a separate design for the iPhone Duo?

No. You need a layout that adapts to whatever width and height it is given. A site built that way will work on the Duo folded, unfolded and in Split View without a special version.

### Can my website tell when an iPhone Duo is folded?

At the time of writing, developers report that Safari does not support the web APIs that report a fold, so a site cannot detect it directly. Design for the size of the window instead, which you can always read.

### Will the iPhone Duo break my 3D or WebGL website?

It can, if the scene assumes the screen never changes shape. A 3D scene should resize its canvas, camera and layout whenever the viewport changes, and do it without reloading or losing the visitor's place.

### When does the iPhone Duo go on sale?

Apple says pre-orders open on 16 October 2026 and the phone goes on sale on 23 October 2026 in more than 70 countries, from $1,999 in the US.

---
BUNQ LABS: https://bunqlabs.com/ · Contact: projects@bunqlabs.com