Device-specific Layout with SwiftUI on Apple Watch and iPhone

In general there are two methods you can use to achieve device specific layouts:

1. Size classes via @Environment variables
2. GeometryReader for more fine-grained control

Unfortunately, UserInterfaceSizeClass only has .compact and .regular and is not available on watchOS.

To use the environment:

struct MyView: View {
    @Environment(\.horizontalSizeClass) var horizontalSizeClass: UserInterfaceSizeClass?
}

To use GeometryReader:

var body -> some View {
    GeometryReader { proxy in
      if proxy.size.width > 324.0/2.0 { // 40mm watch resolution in points
        MyBigView()
      } else {
        MySmallView()
      }
    }
}

For reference, here are the watch resolutions:

• 40mm: 394×324
• 44mm: 448×368
• 38mm: 340×272
• 42mm: 390×312

Divide by 2.0 to get their values in points instead of pixels.