Size classes on iPhone Duo

iPhone Duo has two displays: a small outer display you use folded, and a large inner display you use half-open or open.

This is a quick reference for the size classes you get in each pose and orientation.

Size classes in each pose

You can easily support sarunw.com by checking out this sponsor.

AI Grammar: Correct grammar, spell check, check punctuation, and parphrase.

Try it for Free

What to take from it

• Folded, it's an iPhone. The outer display gives the same size classes as most iPhones: compact width in portrait, and compact in both directions in landscape.
• Unfolded, it's an iPad. The inner display is regular in both directions, in either orientation.
• The hinge angle doesn't matter. Half-open and open give the same size classes and the same size. If you need to know about the fold, size classes won't tell you.

So if your layout already switches on size class, iPhone Duo gets your iPhone layout on the outer display and your iPad layout on the inner display.

Read them

In SwiftUI, read both from the environment:

struct ContentView: View {
    @Environment(\.horizontalSizeClass) private var horizontalSizeClass
    @Environment(\.verticalSizeClass) private var verticalSizeClass

    var body: some View {
        if horizontalSizeClass == .compact && verticalSizeClass == .compact {
            // Folded, landscape.
        }
    }
}

In UIKit, use traitCollection.horizontalSizeClass and traitCollection.verticalSizeClass.

You can easily support sarunw.com by checking out this sponsor.

AI Grammar: Correct grammar, spell check, check punctuation, and parphrase.

Try it for Free

Inside ArrangementView

The table is for the whole window. Inside an ArrangementView, each pane gets its own size classes based on its own size.

For example, folded in portrait, ArrangementView stacks two views. The bottom view reads compact in both directions, even though the display is compact and regular.

If you need the display's size classes, read them outside the ArrangementView.