Websites built for every phone, including the iPhone Duo
Apple's first foldable, the iPhone Duo, went on sale on October 23, 2026, with a 5.4-inch cover screen and a 7.6-inch inner screen that is wider than it is tall when open. Most websites were designed for tall, narrow phones and look stretched, cramped or broken when the screen unfolds. Every site Media Spearhead builds is designed and checked folded, unfolded, in Split View and in both orientations, so it reads well and the call button stays in reach on any phone.
What is the iPhone Duo, and why does it matter for your website?
The iPhone Duo is one phone with two very different screens. When it is closed, your site shows on a phone-sized cover screen; when it opens, the same visit continues on a screen close to a small tablet, often next to another app.
| iPhone Duo | |
|---|---|
| Cover screen (closed) | 5.4-inch OLED, 1398 × 2034 pixels at 460 ppi |
| Inner screen (open) | 7.6-inch folding OLED, 1878 × 2670 pixels at 430 ppi, wider than it is tall when open |
| Refresh rate | Up to 120Hz on both screens |
| Multitasking | Two apps side by side in Split View when open in landscape |
| Software | iOS 27 |
| Availability | On sale October 23, 2026, from $1,999 (256GB) |
Sources: Apple iPhone Duo tech specs, Apple iPhone Duo, MacRumors (dates and price), TechCrunch.
Samsung's Galaxy Z Fold and Z Flip and Google's Pixel Fold already put folding screens in customers' hands. The iPhone Duo brings the same question to iPhone owners: does your site still work when the screen opens?
What breaks on a website when the phone unfolds?
The problems come from layouts that assume one tall, narrow phone screen. These are the ones we see most when we test existing sites on folded and unfolded sizes.
Stretched phone layouts
A one-column phone layout spread across a wide inner screen: long lines of text, huge buttons and photos that fill the whole screen.
Awkward in-between sizes
Sites built with only "phone" and "desktop" breakpoints show a cramped desktop menu or a tiny phone menu on a screen that is neither.
Full-height heroes that crop
Sections sized to the screen height cut off headlines and buttons when the screen is wide and short, or in Split View.
Photos cropped wrong
Images cropped for a tall phone lose the subject on a wider screen, so the team photo shows foreheads and the van loses its logo.
Sticky bars that eat the screen
A sticky header plus a sticky call bar plus a cookie banner can take a third of a short, wide screen in landscape.
Forms and tables that overflow
Fixed-width forms, price tables and embedded maps scroll sideways or spill off the screen when the width changes.
How does Media Spearhead build websites for foldable phones?
We design for the phone first, then make every section adapt to the space it actually has, not to a list of device names. That is what keeps a site right on the next new phone too.
Layouts that adapt to the space
Fluid grids and container queries let each section switch between one, two or three columns based on the room it has, so the open iPhone Duo gets a real two-column layout instead of a stretched phone page.
Type and spacing that scale
Headlines, body text and spacing scale smoothly between the smallest phone and the largest monitor, and text lines stay at a comfortable reading width.
Screen-height done right
We use modern viewport units that respect the browser bars and never lock a section to the full screen height, so nothing important is cut off on a short or wide screen.
Images for every shape
Responsive images with art direction: a different crop or size for narrow, wide and large screens, in WebP, so the subject stays in frame and the page stays fast.
The call button always in reach
Tap-to-call and the main form stay easy to reach with a thumb on the cover screen, and move to where the eye goes on the open screen.
Checked folded and unfolded
Before launch we check every template on the screen sizes below, folded and unfolded, portrait and landscape, and at half width for Split View.
Which screen sizes do we check before every launch?
Every template is checked at each of these sizes before a site goes live. If a layout breaks on any of them, it does not launch.
- Small phonesiPhone SE size
- Standard phonesiPhone and Android
- Large phonesPro Max and Ultra size
- iPhone Duo, closedcover screen
- iPhone Duo, openportrait and landscape
- Split Viewhalf of an open foldable or tablet
- Galaxy Z Fliptall and narrow
- Galaxy Z Fold and Pixel Foldfolded and open
- TabletsiPad and Android, both orientations
- Laptops
- Desktops and large monitors
Is your website ready for the iPhone Duo? Check these eight things
Open your site on a foldable phone, or shrink and widen your browser window, and look for these. If two or more fail, customers on new phones are getting a worse version of your business.
- Does the page reflow into columns when the screen gets wider, or just stretch?
- Is your phone number one tap away on both the small and the large screen?
- Do headlines and buttons in the first screen stay fully visible in landscape?
- Do your photos keep the subject in frame at every width?
- Does any part of the page scroll sideways?
- Is the menu sensible at in-between sizes, not a squeezed desktop menu?
- Do forms, price tables and maps fit the screen without zooming?
- Does the page still load quickly on a phone connection?Test it free with our website speed test.
More on websites that work on every screen
Foldable phone website questions
Will my website work on the iPhone Duo?
If it was built with a fluid, content-based layout, mostly yes; if it was built for one phone width and one desktop width, it will often look stretched or cramped when the iPhone Duo opens. The quickest check is to open your site on the phone, or widen a browser window slowly, and watch for sideways scrolling, cut-off headlines and a squeezed menu.
What screen sizes does the iPhone Duo have?
Apple lists a 5.4-inch cover screen at 1398 by 2034 pixels and a 7.6-inch inner screen at 1878 by 2670 pixels, which is wider than it is tall when the phone is open. Both screens refresh at up to 120Hz.
Do I need a separate website for foldable phones?
No. A separate site would split your SEO and double your upkeep. The right approach is one responsive website whose sections adapt to the space they have, which also covers phones that have not been released yet.
Does a foldable-friendly website help SEO and AI search?
Indirectly, yes. Google indexes the mobile version of your site, and visitors who can read the page and reach the call button stay longer and convert more. AI assistants read the same pages, so a clean, well-structured site helps on both fronts.
Can you fix my existing website for foldable phones?
Usually. Many issues, such as sideways scrolling, full-height sections, image crops and in-between menus, can be fixed in the current theme. If the site is built on a heavy page builder or a fixed-width theme, a rebuild is often faster and cheaper over time. We tell you which after a free review.
Which foldable phones do you test for?
We check every template at the iPhone Duo's closed and open sizes, Samsung Galaxy Z Flip and Z Fold sizes, Pixel Fold sizes and Split View, along with small, standard and large phones, tablets, laptops and desktops.
How much does a website from Media Spearhead cost?
Landing pages start at $800, and full websites are $2,000, $3,500 or $6,500 depending on size. Foldable and every-screen testing is included in every package, not an add-on.
Want a website that works on every phone?
We build fast, phone-first websites for local service businesses that stay right folded, unfolded and on the next new phone, with tap-to-call always in reach. Month-to-month support, and the co-founder answers the phone.