DuoAppsDesigning around the fold on iPhone Duo
When iPhone Duo is partially folded, the inner display curves at its center: anything in that fold is hard to see and hard to tap. System components move out of it on their own. Keep your own interactive elements out of it as much as possible, moving them a little and together; scrolling content doesn’t need to avoid it, and in a grid, prefer an even number of columns.
The problem
When the device is partially folded, open like a book or propped up on a table, the inner display curves at its center. Apple calls this area the folding region: one of the display’s reserved regions, it divides the screen into two usable areas. An image that spans it is hard to read, and a button that lands in the curve is hard to tap.
With the device flat, the fold is inactive. A layout centered on the whole screen still puts its elements in the middle, right where the curve appears as soon as the device folds: Apple suggests starting your audit with those layouts (Tech Talk “Strike a pose with adaptive layouts on iPhone Duo”).
The rules
- 1
When the device is partially folded, system components move out of the fold on their own: sheets, alerts, context menus, popovers, and toolbar buttons. A split view (list and detail) gives its two columns equal widths, one on each side. Use these components wherever you can, and your app gets the same behavior. Arrangement views, the two-view containers new in iOS 27.1, adapt to the fold too.
- 2
Keep what people tap out of the fold as much as possible: a button that lands in the curve is hard to tap. The system doesn’t move the elements your app places itself: find the most important ones and move them clear of the fold, which apps can read as a reserved region starting in iOS 27.1.
- 3
Content that scrolls continuously, like an article, a feed, a document, or a list, doesn’t need to avoid the fold. It already adapts by scrolling, and moving it from one area to the other can interrupt its continuity.
- 4
Move only what needs to move, and not far. If an element can adapt on its own, move it on its own; if elements work together, move them together, like a photo and its context menu, which align around the fold instead of the menu centering itself in the trailing area. Favor small adjustments over rearranging: a control that disappears or jumps far away is hard to find again.
- 5
Choose the area by what the element is for. With the device partially folded like a book, an alert moves to the trailing side, closer to where it will appear when the device closes and the experience continues on the outer display. When several areas would work, stay close to what the element serves: the search field, above the keyboard, adjusts its width and position to stay over the view it searches.
- 6
With the device propped up on a table, the top area suits what people look at and the bottom one what they touch: the system moves an alert up to keep it easy to find; move playback controls down to a stable base. A layout made for this pose is optional; if you make one, keep the same controls and the same hierarchy as in the other poses.
- 7
In a grid the fold runs through, prefer an even number of columns, even with the device flat, so content divides cleanly on either side. Even inactive, the fold counts for decisions like this one.
- 8
To keep every item in a grid tappable when the device is partially folded, keep the grid’s outer margins and widen the space around the hinge: each item stays entirely within its area. Apple presents this as a design choice, with a grid from Fitness.
- 9
Use the hinge angle for effects and interactions, not for layout. For layout, rely on reserved regions and arrangement views.
Demo
Static version, no JavaScript
- 9:419:41
Flat. Flat, in landscape: the player is centered on the screen, as on other devices. The fold is inactive, drawn as a dashed line, and it runs right through the play button: that matters as soon as the device folds (rule 2).
- 9:419:41
Like a book. Partially folded like a book: the fold becomes a reserved region, in grey, and the player moves out of it, whole, its video and controls together, into the area on one side, as Apple shows with the Now Playing view in Podcasts (rules 2 and 4).
- 9:419:41
Alert. An alert from the system, with the device partially folded like a book: it doesn’t sit across the fold, it moves to the trailing side, closer to where it will appear when the device closes (rules 1 and 5).
- 9:419:41
On a table. Propped up on a table, the display in portrait: the fold runs across, and the bars go back to horizontal. The video sits in the top area, for looking; its controls in the bottom one, for touching (rule 6).
FAQ
Should I avoid the fold on iPhone Duo?
When the device is partially folded, yes for anything people tap, as much as possible: system components move out of it on their own. Scrolling content doesn’t need to avoid it, and with the device flat, the fold is inactive.
How many columns should a grid have on iPhone Duo?
Derive the number from the available width and a maximum cell width (Don’t stretch, a DuoApps recommendation). On the inner display, Apple suggests an even number, even with the device flat, so content divides cleanly at the fold.
What happens to an alert when iPhone Duo is partially folded?
The system moves it out of the fold. With the device partially folded like a book, it moves to the trailing side; propped up on a table, it moves up to the top area, where it stays easy to find.
How does an app know iPhone Duo is folded?
For layout, it reads the fold, a reserved region that is active when the device is partially folded, and inactive with no width when it’s flat; apps can read it starting in iOS 27.1. For an effect or an interaction, it reads the hinge’s state (closed, partially open, fully open) and its angle.
Do I need a different layout when iPhone Duo is partially folded?
No: Apple asks you not to reinvent your app when it resizes, and even a layout for the table pose is optional. As the device folds, move only what needs to move, a little and together, and keep the same features in every pose.
Sources
- Design for iPhone Duo, Apple Developer, Tech Talk
- Strike a pose with adaptive layouts on iPhone Duo, Apple Developer, Tech Talk
- Designing for iPhone Duo, Apple Human Interface Guidelines, September 9, 2026
- Preparing your app for iPhone Duo, Apple Developer Documentation
- Prepare your app for iPhone Duo, Apple Developer, Tech Talk
- Leverage multiple displays and scenes on iPhone Duo, Apple Developer, Tech Talk