How iOS Apps Adapt to the iPhone XS Max and iPhone XR Screen Sizes

Last year I wrote an article showing How iOS Apps Adapt to the iPhone X Screen Size and noted that:

Apple have an excellent track record of providing backward compatibility with existing apps when new devices or versions of iOS are released. Apps are letter-boxed or zoomed to fit larger screen sizes. iOS will often behave like an earlier version to avoid breaking any assumptions that an older app might be making about its environment. Apple go to a lot of effort to try and make older apps function correctly on newer devices and iOS versions.

At their September 2018 event, Apple announced three new iPhone models: iPhone XS, iPhone XS Max and iPhone XR. The iPhone XS is the effectively same as last year’s iPhone X in terms of screen size and behaviour. If your app already supports the iPhone X it will appear the same on the iPhone XS. My earlier article describes how apps that don’t support the iPhone X will appear (i.e. letterboxed). We can ignore the iPhone XS for the purposes of this article; the bigger screen sizes are the interesting cases.

The 6.5" iPhone XS Max is to the 5.5" plus size iPhones as the 5.8" iPhone X (and XS) is to the 4.7" iPhones: almost the same physical body size but with an edge-to-edge OLED screen using 3 pixels per point. The iPhone XS Max has the same screen width in points as the plus size iPhones but is correspondingly taller to account for the 9:19.5 aspect ratio. The iPhone XS Max has a screen size of 414×896 points (1242×2688 pixels).

The 6.1" iPhone XR is effectively a 2x version of the iPhone XS Max with the same pixel density as the iPhone 6/6s/7/8 models. The iPhone XR has a screen size of 414×896 points (828×1792 pixels).

How do the iPhone XS Max and iPhone XR display apps on their larger screens? Just like last year with the iPhone X, that depends on which version of Xcode the apps were built with. For the purposes of this article we can treat the iPhone XS Max and iPhone XR together. What happens with apps on the iPhone XS Max will also happen on the iPhone XR, just at 2x instead of 3x.

iPhone X Reference

As a reference, here’s how an Xcode 9/ iOS 11 app appears on the iPhone X at its native resolution:

Xcode 9 / iOS 11 build of Adaptivity running on iPhone X simulator running iOS 11 in portrait

This shows the familiar 375×812 point screen size of the iPhone X with its large navigation bar and toolbar heights to keep content away from the notch and Home Indicator.

In landscape the status bar is hidden and the bars are reduced in height:

Xcode 9 / iOS 11 build of Adaptivity running on iPhone X simulator running iOS 11 in landscape

Xcode 9 / iOS 11

Apps that were built with Xcode 9 (i.e. targeting iOS 11) are unaware of the existence of the iPhone XS Max screen size. The same Xcode 9 / iOS 11 app running on the new iPhone XS Max (or iPhone XR) is simply zoomed to fill the larger screen:

Xcode 9 / iOS 11 build of Adaptivity running on iPhone XS Max simulator running iOS 12 in portrait
Xcode 9 / iOS 11 build of Adaptivity running on iPhone XS Max simulator running iOS 12 in landscape

Zooming will result in some bluriness but at the high pixel density will be difficult to notice in practice. Note the compact width horizontal size class in landscape — just like on the iPhone X. Thanks to Apple’s backwards compatibility, the iPhone XS Max is behaving exactly like an iPhone X would when running an app built with Xcode 9 / iOS 11.

Xcode 10 / iOS 12

When built with the Gold Master version of Xcode 10, apps see the true nature of the iPhone XS Max and iPhone XR screens:

Xcode 10 / iOS 12 build of Adaptivity running on iPhone XS Max simulator running iOS 12 in portrait

The full resolution of the screen is now available. Layout margins have increased slightly from 16 points to 20 points, which is consistent with the behaviour of the plus size iPhones.

In landscape things are more interesting:

Xcode 10 / iOS 12 build of Adaptivity running on iPhone XS Max simulator running iOS 12 in landscape

The navigation and toolbars are not reduced in height quite as much as on the iPhone X. Note also that the iPhone XS Max has a regular width size class in landscape. This is also consistent with behaviour on the plus size iPhones. The readable content guide margins, however, are different to the layout margins. That is different to the behaviour on plus size iPhones.

More differences in behaviour can be seen with Split View Controllers in landscape. The plus size iPhones show both Master and Detail views side-by-side:

Xcode 9 / iOS 11 build of Adaptivity showing a Split View Controller running on iPhone 8 Plus simulator running iOS 11 in landscape

With default configuration, the iPhone XS Max shows a full screen Detail view that is essentially the same as the Main Window screenshot shown earlier. The Master view appears as a slide over and is considerably wider than the Master view on the plus size iPhones:

Xcode 10 / iOS 12 build of Adaptivity showing a Split View Controller running on iPhone XS Max simulator running iOS 12 in landscape

Conclusion

As should now be expected, Apple have designed the iPhone XS Max, iPhone XR and iOS 12 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. Even apps that use auto layout and have launch storyboards will be shown zoomed to fill the larger screen. Rebuilding with Xcode 10 opts the developer into the larger screen size.

EDIT: I have written a similar article on How Apps Adapt to the Series 4 Apple Watch Screen Sizes.

How Did I Run Xcode 9 / iOS 11 apps on iOS 12 Simulators?

You might be wondering how I was able to capture screenshots from the Xcode 10 / iOS 12 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.

Adaptivity iOS App

The screenshots in this article were taken from the iOS 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. More screenshots and information on all the features is available on my web site.

Like what you read? Give Geoff Hackworth a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.