Will my website work on the iPhone Duo?

The short answer

Probably, if your site is properly responsive: if it already adapts to any screen width rather than to a list of known phones, it should work on the iPhone Duo too. The new phone does not need a new website. It does show up weak spots that a normal phone hides, because the space your page gets can change while someone is reading it.

What changes with a foldable iPhone

Apple announced the iPhone Duo in September 2026. Pre-orders opened on 16 October and it went on sale on Friday 23 October in more than 70 countries and regions, with 28 more from 30 October. Three things matter for a website:

• Two screens. Apple quotes a 7.6-inch display inside and a 5.4-inch display on the outside, measured diagonally. Apple says both share the same aspect ratio, so content scales proportionally between them. Your page appears on whichever one is in use.
• It changes size mid-visit. Apple says content reacts as the phone folds, turns when the phone is rotated and moves to the other display when it is flipped over. For a website, that means the same page, already open, suddenly has more or less room.
• Split View. For the first time on an iPhone, two apps can sit side by side, including two Safari windows. Your site then gets only part of the screen, so it can be narrower than the full display.

Apple has not published the width in CSS pixels that a web page gets on either display. Do not design to a guessed number. Design for any width, which is what responsive design meant all along.

A 10-minute check you can do today

You do not need the phone. A desktop browser is enough to find most problems.

1. Open your homepage in a desktop browser, make the window as narrow as it goes, then slowly drag it wider until it fills the screen. Do not reload. This is roughly what happens when someone unfolds the phone or closes Split View.
2. Open the browser’s responsive mode (in Chrome, Edge and Firefox it is in the developer tools; in Safari it is called Responsive Design Mode) and try phone sizes in both orientations, including some that are wider than a normal phone.
3. Repeat on the pages that earn money: a service page, a product page, the contact or checkout page.

While you resize, look for these:

• Fixed widths: text or boxes that stop at a set width and leave a strip of empty space, or run off the edge.
• Horizontal scrolling: if the page can be dragged sideways, something is wider than the screen. A table, a long word or an image is the usual cause.
• Hero images: the main image cropped so a face, product or headline disappears at some widths.
• Sticky headers and banners: a header, cookie bar or chat button that covers too much of a short or narrow window.
• Forms: fields that become too narrow to type in, labels that collide, or a form that loses what was typed when the layout changes.
• Tap targets: buttons and links that end up too small or too close together to hit with a thumb.
• Embedded video and maps: frames with a fixed size that overflow, or leave black bars.
• Menus: a menu that was open, or a slider halfway through, that breaks after the window changes size.

TipWrite down the page and the window width where something breaks, with a screenshot. That turns “it looks odd on the new iPhone” into a fix a developer can make in minutes.

What to ask your developer to check

If the quick check turns something up, these are the technical points behind it. Apple’s guidance to app developers for the iPhone Duo says the same things in app terms: hardcoded screen sizes and device assumptions break layouts, and a fold can resize an app in the middle of a session.

• Fluid layouts. Widths in percentages, flexbox and grid, with breakpoints chosen where the content needs them, not at the sizes of particular phones.
• Container queries. Components that adapt to the space they are given rather than to the whole screen. This matters in Split View, where the window is narrower than the screen. Container queries work in all current major browsers.
• Viewport units. 100vh can be taller than the visible area on phones, because the browser’s own bars come and go. The newer units dvh, svh and lvh deal with this. MDN notes that dvh can make content resize while the visitor scrolls, so use it with care.
• Responsive images. Use srcset and sizes so the browser picks a file that suits the space, and check the crop of full-width images at wide and narrow sizes. Apple warns app developers that full-bleed images can lose important content on wider displays.
• No device detection. Do not serve a different layout based on the device name or a list of known screen sizes. Apple tells app developers to remove checks for specific device sizes, because they will not match the iPhone Duo. The same logic applies to websites.
• Resizing without a reload. Anything measured once when the page loads, such as a slider, a sticky element or a chart, has to measure again when the size changes. ResizeObserver exists for this.

Developers with a Mac can also use the iPhone Duo simulator in Xcode 27.1, which Apple names as the best way to test the full experience.

What about fold detection?

The W3C has two experimental standards for foldable screens: the Viewport Segments API, which tells a page where the fold is, and the Device Posture API, which tells it whether the device is folded. According to MDN’s browser compatibility data, Chrome supports both. Safari on iPhone supports neither by default; Device Posture is only available behind an experimental setting. Do not build anything that depends on them yet. A layout that works at every width does not need to know about the fold.

Does it matter for search and speed?

Google uses the mobile version of a site’s content, crawled with its smartphone crawler, for indexing and ranking. A layout that breaks on phones is a search problem as well as a design problem. The iPhone Duo does not change how Google crawls your site, but it adds one more kind of phone your visitors may use.

Layout problems also show up in the Core Web Vitals, especially layout shift: content that jumps while someone is reading. Our Core Web Vitals guide explains what each measure means and how to fix it.

Do you need to do anything at all?

If the quick check passes, no. Keep an eye on your analytics after launch, and look again if you see a jump in visitors leaving from phones.

If it finds one or two problems, fix those. They usually affect other phones and small windows too, so the work is not wasted on one device.

If the site breaks at many widths, it was built for a handful of fixed screens, and the foldable is just the newest one it does not fit. That is a reason to plan a rebuild properly rather than patch it, and our website redesign SEO checklist covers how to do that without losing search traffic.

Where to start

Run the 10-minute check above on your three most important pages. For the technical layer, the free website review checks speed, search basics and sharing tags for any page in about a minute.

If the result points to a rebuild, responsive layouts that hold up at any size are part of every site in our web design and development service. Kliqer is a creative technology agency in Amsterdam, making brands, websites and digital products since 2018.

Quick answers