iPhone Duo Safe Area and Content Margins: A Developer Guide

For years, the iPhone safe area was mostly a top-and-bottom problem: the notch or Dynamic Island above, the Home indicator below. The iPhone Duo safe area is different. Navigation, toolbar items, status information and Live Activities can share one vertical bar along the side of the display, so the left and right insets are often not equal. This guide explains what changed, which APIs to use in SwiftUI and UIKit, and how to check your layout before you ship.

Everything here comes from Apple's iPhone Duo Tech Talks, Apple's documentation and developer forum answers, plus posts from iOS developer @sarunw. We haven't tested these APIs on hardware ourselves. Most of them arrived in iOS 27.1 and Xcode 27.1, so details can still change between releases.

Why is the iPhone Duo safe area uneven?

On iPhone Duo, many controls move from the top and bottom of the screen to the side. Apple's "Design for iPhone Duo" Tech Talk puts it plainly: controls "are positioned along the side of the device," and "most content needs an offset so it isn't hidden behind the controls." The vertical bar is covered in detail in our guide to the iPhone Duo vertical toolbar.

That offset is the horizontal safe area inset. In Prepare your app for iPhone Duo, Apple says safe areas are "often asymmetric," especially on iPhone Duo, where vertical buttons can appear on the left side in landscape and in Split View multitasking. In Split View, the opposite edge can also carry another app's controls, so both sides matter.

The vertical bar follows the hardware, not the reading direction. In right-to-left languages, it stays on the same side of the device, so don't map "the side with the bar" to leading or trailing. Read the actual inset on each edge.

How do I handle horizontal safe area insets?

The rule from Apple is short: "Avoid assuming that insets on opposite sides are equal." Lay out foreground content inside the safe area, let backgrounds extend under it, and compute sizes from the inset rectangle rather than from one side.

SwiftUI already places content within the safe area by default. In UIKit, Apple's Tech Talk shows the common mistake and the fix:

// Avoid: assumes left and right insets are equal
let width = view.bounds.width - view.safeAreaInsets.left * 2

// Handle each side independently
let width = view.bounds.inset(by: view.safeAreaInsets).width

The first line doubles the left inset, which is wrong whenever the bar sits only on one side. The second line subtracts each edge on its own, so it works on any device and in any pose.

For backgrounds, Apple recommends .ignoresSafeArea() in SwiftUI and sizing the background view to view.bounds in UIKit. The "Design for iPhone Duo" talk also suggests a mix: "a full-width background image or header with scrollable foreground content that's inset," as long as every interactive element stays inside the inset area.

Do I need to clip scroll content under the vertical bar?

No. On the developer forums, an Apple engineer explained that the side with the bar has a safe area inset that "will automatically become a content inset on the scroll view," so all content stays reachable. Don't clip it manually.

What are uneven margins on iPhone Duo?

Safe areas tell you where system UI is. Margins tell you how far your content should sit from the edge of its container. On iPhone Duo, both can differ by side.

According to @sarunw, iPhone Duo has "20 points on one side, 0 next to the bar." That matches Apple's documentation for the new container margin guide, which says system layout margins "range from 16 to 20 points on iPhone" and that on iPhone Duo "the margin can also be asymmetric, applying different values on each side of the device when next to a vertical bar." Apple's Tech Talk explains why: asymmetric margins let foreground content "get closer to vertical buttons and the status bar, while preserving the margin on the opposite side."

The exact point values come from a developer's observation, not an Apple specification. Apple's guidance is to read or apply the guide "instead of writing these values into your layout."

How do I use .contentMargins(for: .container) in SwiftUI?

iOS 27.1 adds contentMargins(for:edges:alignment:), a modifier that insets a view by a ContentMarginGuide. SwiftUI provides one guide, container, described as "the margins of the container the view is in." The edges parameter defaults to all edges, and alignment is optional.

This is the example from Apple's documentation. It lines a grid up with the horizontal system margins:

NavigationStack {
    AlbumGrid()
        .contentMargins(for: .container, edges: .horizontal)
}

Edges you leave out stay unchanged, even when the guide has a value for them. That makes .horizontal a good fit for iPhone Duo, where the horizontal margins are the ones that vary.

When a view doesn't fill its proposed size, alignment places it within the margins. Apple's documentation uses a compose button that sits in the bottom-trailing corner of its container's margins:

ZStack {
    MessageList()
    ComposeButton()
        .contentMargins(
            for: .container, alignment: .bottomTrailing)
}

This is a different modifier from the older contentMargins(_:for:) and contentMargins(_:_:for:), which set a fixed length for a placement such as scroll content. The new one takes a guide instead of a number, so the value can change with the device, the container and the pose.

Reading the margins from GeometryProxy

If you lay out views manually, GeometryProxy gains contentMargins(for:edges:), which returns EdgeInsets. It sits next to the existing safeAreaInsets:

GeometryReader { proxy in
    let margins = proxy.contentMargins(for: .container, edges: .horizontal)
    let safeArea = proxy.safeAreaInsets
    // margins.leading and margins.trailing can differ on iPhone Duo.
    CustomCanvas(leading: margins.leading, trailing: margins.trailing)
}

CustomCanvas is a placeholder for your own view. The point is to read both edges separately instead of assuming one value.

How do layout margins work in UIKit on iPhone Duo?

UIKit already has layout margins: layoutMargins, directionalLayoutMargins and layoutMarginsGuide. Apple's Tech Talk says they are asymmetric on iPhone Duo, just like safe areas. Pinning content to the margins guide of a view controller's root view picks up those values for free.

There is one change to know about. In a forum thread about margins that looked broken, an Apple engineer explained that "in iOS 27.1, the default layout margins of a UIView become zero on iPhone Duo," and that the change reaches other devices in iOS 27.2. A view controller still gives its root view systemMinimumLayoutMargins. To inherit them in a subview, set preservesSuperviewLayoutMargins to true.

NSLayoutConstraint.activate([
    titleLabel.leadingAnchor.constraint(equalTo: view.layoutMarginsGuide.leadingAnchor),
    titleLabel.trailingAnchor.constraint(equalTo: view.layoutMarginsGuide.trailingAnchor)
])

// A custom subview that should inherit the view controller's margins
cardView.preservesSuperviewLayoutMargins = true

For custom cell content, the same engineer suggested reading the preferred directionalLayoutMargins from UIListContentConfiguration.cell() instead of relying on the UIView default. If your cells suddenly lose their padding on iPhone Duo, check this first.

How does the vertical bar affect apps built with older SDKs?

How much of the display your app uses depends on the SDK you build with. Apple describes three stages:

Older apps keep working, but they don't get the full experience. Building with the iOS 27.1 SDK is where uneven insets and margins start to matter, because your content now reaches the edge next to the bar. Apple also notes that iPhone Duo honors UIRequiresFullScreen, but your app still resizes when someone opens or closes the device.

The camera is a separate case. On the developer forums, Apple suggests querying occlusion regions instead of ignoring the whole safe area when you want full-width content. Our guide to reserved regions and the fold covers those APIs.

What should I check before shipping?

Apple's design guidance is to "build your layouts with layout margins and horizontal safe area insets" and to avoid "fixed widths, breakpoints, or any metrics tied to a specific screen." That gives you a short checklist:

1. Build with Xcode 27.1 and the iOS 27.1 SDK, then run your app on the iPhone Duo simulator in every pose: closed, open, portrait and landscape.
2. Search your code for safeAreaInsets.left * 2 and similar math. Replace it with bounds.inset(by:) or per-edge values.
3. Don't hard-code 16 or 20 points. Apply .contentMargins(for: .container, edges: .horizontal) in SwiftUI or pin to layoutMarginsGuide in UIKit.
4. Look for UIKit views and cells that lost their padding because the default UIView margins are now zero on iPhone Duo.
5. Keep every button and text field inside the safe area. Let only backgrounds and decorative images run edge to edge.
6. Test Split View multitasking, where another app's controls can sit on the opposite edge.
7. Test a right-to-left language. The bar stays on the same side of the device.

If you're adapting a whole app, our iPhone Duo preparation checklist puts this next to size classes, sheets and the hinge.

Key takeaways

• On iPhone Duo, controls can sit at the side, so horizontal safe area insets matter as much as the top and bottom.
• Never assume the left and right insets match. Use bounds.inset(by: safeAreaInsets) or read each edge.
• iOS 27.1 adds .contentMargins(for: .container, edges: .horizontal) and GeometryProxy.contentMargins(for:edges:) for system margins that can be uneven next to a vertical bar.
• In UIKit, pin to layoutMarginsGuide, and note that default UIView margins are zero on iPhone Duo in iOS 27.1.
• Build with the iOS 27.1 SDK to reach the screen edge, then test every pose, Split View and right-to-left layouts.

Next, read how the system moves bars to the side in our vertical toolbar guide, or see apps that already make the most of the display on Built for the Fold.