iPhone Duo Adaptive Layout Guide
Design layouts that scale correctly across every iPhone Duo width using size classes, NavigationSplitView, and proportional geometry.
Last updated
Quick answer
An adaptive layout for iPhone Duo is one built against available width, not a fixed screen size. Use horizontalSizeClass and verticalSizeClass to switch between single- and multi-column arrangements, prefer NavigationSplitView for list-detail interfaces, and size grids with adaptive column counts instead of a fixed number.
Core principle
Adaptive layout on iPhone Duo means designing against a range of available widths rather than a fixed screen size. The same principles Apple has taught for iPad and Split View apply directly: layout by size class and available space, not by device.
Size classes
Duo can present your app in Compact width (folded, or a narrow Split View pane) or Regular width (unfolded, or a wide pane). Structure your view hierarchy so each size class gets a purpose-built arrangement:
@Environment(\.horizontalSizeClass) private var hSizeClass
var body: some View {
Group {
if hSizeClass == .regular {
HStack(spacing: 24) {
SidebarView().frame(width: 280)
DetailView()
}
} else {
DetailView()
}
}
}NavigationSplitView
For list-detail interfaces, prefer NavigationSplitView over a hand-rolled HStack. It automatically collapses to a single column in Compact width and restores multiple columns in Regular width, matching Duo's fold transitions without extra code.
Adaptive grids
For content grids, use LazyVGrid with adaptive or flexible column sizing so the number of columns grows naturally as more width becomes available, instead of a fixed column count that leaves empty space or crowds content.
Common mistake
Setting a fixed number of grid columns based on an assumption about screen width breaks as soon as the app is resized in Split View. Use adaptive column sizing so the grid recalculates on its own.
Anti-patterns to avoid
- Reading a hardcoded pixel width to decide layout
- Branching on device model or identifier
- Assuming safe area insets are symmetric
- Rebuilding the entire view hierarchy on every resize
Frequently asked questions
What is adaptive layout on iPhone Duo?
Adaptive layout means designing against a range of available widths — Compact and Regular size classes — rather than a fixed screen size. It reuses the same size-class and window-scene system Apple already uses for iPad and Split View, so an app built to resize correctly there also resizes correctly on Duo.
Should I detect the iPhone Duo device model directly?
No. Reading a device identifier or a hardcoded pixel width breaks as soon as Apple ships a new posture or device, or the user resizes the app in Split View. Read horizontalSizeClass and verticalSizeClass instead — they reflect the space you're actually given.
What SwiftUI component should I use for list-detail interfaces?
Use NavigationSplitView instead of a hand-rolled HStack. It automatically collapses to a single column in Compact width and restores multiple columns in Regular width, matching Duo's fold transitions with no extra code.