How to preview your layout in different devices

Paul Hudson @twostraws September 3rd 2021

Updated for Xcode 14.0 beta 1

Xcode’s SwiftUI preview lets us show our designs in multiple screen sizes at the same time using the .previewDevice() modifier. This needs to be provided with the exact name of a device as seen in Xcode’s destination menu, e.g. “iPhone 12”.

For example, this shows a preview on the iPhone 12 Pro Max:

ContentView()
    .previewDevice(PreviewDevice(rawValue: "iPhone 12 Pro Max"))

When using specific devices for previewing, you’re likely to find it useful to add in the .previewDisplayName() modifier, which lets you put a name under a device in the preview window.

For example, this creates two previews for two different devices, adding the name of each to make it clear what’s going on:

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewDevice(PreviewDevice(rawValue: "iPhone 12"))
            .previewDisplayName("iPhone 12")

        ContentView()
            .previewDevice(PreviewDevice(rawValue: "iPhone 12 Pro Max"))
            .previewDisplayName("iPhone 12 Pro Max")
    }
}

Xcode showing Previews on an iPhone 12 and an iPhone 12 Pro Max.