How Apps Adapt to the Series 4 Apple Watch Screen Sizes

38mm and 42mm Reference

As a reference, here’s how an Xcode 9 / watchOS 4 app appears on the 38mm and 42mm Watches:

Xcode 9 / watchOS 4 build of Adaptivity running on 38mm and 42mm Watches running watchOS 5

Xcode 9 / watchOS 4

Apps built with Xcode 9 (i.e. targetting watchOS 4) are unaware of the existence of the newer 40mm and 44mm Watches. The same Xcode 9 / watchOS 4 app running on the new Watches run at their original 38mm and 42mm sizes, with the their original status bar heights (19 and 21 points):

Xcode 9 / watchOS 4 build of Adaptivity running on 40mm and 44mm Watches running watchOS 5
Xcode 9 / watchOS 4 build of Adaptivity running on 40mm and 44mm Watches running watchOS 5

Xcode 10 / watchOS 5

When built with the Gold Master version of Xcode 10, apps see the true nature of the 40mm and 44mm Watch screens:

Xcode 10 / watchOS 5 build of Adaptivity running on 40mm and 44mm Watches running watchOS 5
Xcode 10 / watchOS 5 build of Adaptivity running dark mode on 40mm and 44mm Watches running watchOS 5

Conclusion

As should now be expected, Apple have designed the 40mm and 44mm Watches and watchOS 5 to behave in a backwardly-compatible manner for apps that were built with Xcode 9 and can’t reasonably be expected to be able to fully support the new devices.

How Did I Run Xcode 9 / watchOS 4 apps on watchOS 5 Simulators?

You might be wondering how I was able to capture screenshots from the Xcode 10 / watchOS 5 simulators with apps built with Xcode 9. My earlier article iPad Navigation Bar and Toolbar Height Changes in iOS 12 explains the process in the Wait, What Did You Say? section for the iPhone simulator.

Adaptivity iOS App

The screenshots in this article were taken from the watchOS simulator running my Adaptivity iOS app. Adaptivity is a tool for developers and designers to visualise the different screen sizes, layout margins, readable content guides, bar heights and Dynamic Type sizes that a modern, adaptive, iOS app uses when running on different devices and iPad multitasking sizes. The app is most useful for iPhone and iPad but I recently added a simple companion Watch app. More screenshots and information on all the features is available on my web site.

Other Articles That You Might Like

There is an iPhone-only version of Adaptivity to show How iPhone-only Apps Appear on iPad (it changed in iOS 12).

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Geoff Hackworth

Geoff Hackworth

1.1K Followers

Independent and freelance software developer for iPhone, iPad and Mac