How iPad Apps Adapt to the New 11" and 12.9" iPads Pro

10.5" and 1st/2nd Generation 12.9" iPad Pro and iOS 12.0 Reference

Full Screen

As a reference, here’s how an Xcode 10.0 / iOS 12.0 app appears on the 10.5" and 1st/2nd generation 12.9" iPad Pro devices at their native resolution:

Xcode 10.0 / iOS 12.0 build of Adaptivity running on 10.5" iPad simulator running iOS 12.0 in landscape
Xcode 10.0 / iOS 12.0 build of Adaptivity running on 1st/2nd gen 12.9" iPad simulator running iOS 12.0 in landscape

Safe Area

For all previous iPad devices (and, spoiler alert, also the new devices), the Safe Area only excludes the status bar, navigation bar, toolbar and tab bar (where appropriate). For example, the 10.5" iPad Pro showing a status bar and large navigation bar has a top safe area inset of 122 points (244 pixels) on iOS 12.x (it was slightly smaller on iOS 11):

Xcode 10.0 / iOS 12.0 build of Adaptivity running on 10.5" iPad simulator running iOS 12.0 in landscape

Split Screen Multitasking

The 9.7" and 10.5" iPads Pro show two compact-width apps side-by-side when using a 50:50 split. In an uneven split, the wider app has regular width and the narrower app has compact width. The narrower app is 320 points (640 pixels) wide, the same as a 3.5" or 4" iPhone, in both landscape and portrait and the wider app occupies the remaining space (so it is wider on the 10.5" than the 9.7"):

Xcode 10.0 / iOS 12.0 build of Adaptivity running side-by-side on 10.5" iPad simulator running iOS 12.0 in landscape
Xcode 10.0 / iOS 12.0 build of Adaptivity running side-by-side on 1st/2nd gen 12.9" iPad simulator running iOS 12.0 in landscape

Slide Over

The 9.7" and 10.5" iPads Pro show a compact-width Slide Over app with a width of 320 points (640 pixels) in both landscape and portrait. The height is 40 points shorter than the full screen height (20 points inset from the top to avoid obscuring the status bar and 20 points inset from the bottom to keep it vertically centred):

Xcode 10.0 / iOS 12.0 build of Adaptivity running in Slide Over on 10.5" iPad simulator running iOS 12.0 in landscape
Xcode 10.0 / iOS 12.0 build of Adaptivity running in Slide Over on 1st/2nd gen 12.9" iPad simulator running iOS 12.0 in landscape

Xcode 10.0 / iOS 12.0 Builds

Apps that were built with Xcode 10.0 or earlier (i.e. targeting iOS 12.0 or earlier) are unaware of the existence of the new 11" iPad Pro screen size or a 12.9" iPad Pro with a Home Indicator (instead of a Home Button).

Full Screen

iPad apps that do not support iPad multitasking (i.e. they have UIRequiresFullScreen set to YES in the Info.plist) will appear at their original 9.7" or 10.5" iPad resolution on the 11" iPad. Which version is used depends on whether a 10.5" launch image or a launch storyboard (which opts into 10.5" iPad support) is present. The apps are scaled to almost fill the screen of the 11" iPad. Similarly, the 1st and 2nd generation 12.9" iPad resolution is scaled to almost fill the screen on the 3rd generation 12.9" iPad. The status bar and Home Indicator are effectively outside of the screen area. In order to maintain a 4:3 aspect ratio, the app is also inset on the left and right edges. Of course, this will introduce some scaling artefacts.

Full Screen Xcode 10.0 / iOS 12.0 build of Adaptivity running on 11" iPad simulator running iOS 12.1 in landscape
Full Screen Xcode 10.0 / iOS 12.0 build of Adaptivity running on 3rd gen 12.9" iPad simulator running iOS 12.1 in landscape
Xcode 10.0 / iOS 12.0 build of Adaptivity running on 11" iPad simulator running iOS 12.1 in portrait
Xcode 10.0 / iOS 12.0 build of Adaptivity running on 11" iPad simulator running iOS 12.1 in landscape
Xcode 10.0 / iOS 12.0 build of Adaptivity running on 3rd gen 12.9" iPad simulator running iOS 12.1 in portrait
Xcode 10.0 / iOS 12.0 build of Adaptivity running on 3rd gen 12.9" iPad simulator running iOS 12.1 in landscape

Safe Area

Xcode 10.0-built apps running on the new devices see similar Safe Area behaviour as before, except that the status bar is 24 points rather than 20 points tall. The new iPads do not have leading/trailing safe area insets, in either orientation. With no notch and smaller rounded corners compared to the iPhones X the usual leading/trailing layout margins should be wide enough to avoid UI elements appearing too close to the corners.

Xcode 10.0 / iOS 12.0 build of Adaptivity running on 11" iPad simulator running iOS 12.1 in landscape

Split Screen Multitasking

Older apps running in split screen multitasking on the new iPads also see a screen size unlike any previous devices. As with full screen apps, the status bar and Home Indicator sit outside the app’s accessible area. A 50:50 split on the 11" iPad still gives two regular-width apps, but the actual widths are different (to fill the wider screen):

Xcode 10.0 / iOS 12.0 build of Adaptivity running on 11" iPad simulator running iOS 12.1 in landscape
Xcode 10.0 / iOS 12.0 build of Adaptivity running on 11" iPad simulator running iOS 12.1 in landscape
Xcode 10.0 / iOS 12.0 build of Adaptivity running on 3rd gen 12.9" iPad simulator running iOS 12.1 in landscape

Slide Over

Older apps running in Slide Over on the 11" iPad have a width of 375 points in landscape and 320 points in portrait. As with the iPad 10.5" reference, the height is two status bar heights shorter than the height of the screen. The status bar is 24 points tall on the 11" iPad so this means the Slide Over app on the 11" iPad is 8 points shorter than on the 10.5" iPad.

Xcode 10.0 / iOS 12.0 build of Adaptivity running in Slide Over on 11" iPad simulator running iOS 12.1 in landscape
Xcode 10.0 / iOS 12.0 build of Adaptivity running in Slide Over on 3rd gen 12.9" iPad simulator running iOS 12.1 in landscape

Xcode 10.1 / iOS 12.1 Builds

When built with Xcode 10.1 (i.e. linked against iOS 12.1), apps get access to the full 11" and 12.9" screen sizes of the new devices.

Full Screen

The status bar is the same height as in compatibility mode (24 points) but is now part of the app’s screen area. The toolbar (and tab bar) are 20 points taller to leave space for the Home Indicator:

Xcode 10.1 / iOS 12.1 build of Adaptivity running on 11" iPad simulator running iOS 12.1 in landscape
Xcode 10.1 / iOS 12.1 build of Adaptivity running on 3rd gen 12.9" iPad simulator running iOS 12.1 in landscape

Safe Area

Updated apps see the same top safe area inset for the status bar (which is now actually part of the app) and a new bottom inset due to the Home Indicator. There is no leading/trailing inset in either orientation:

Xcode 10.1 / iOS 12.1 build of Adaptivity running on 11" iPad simulator running iOS 12.1 in landscape

Split Screen Multitasking

Updated apps in split screen also see the full height with the taller status bar and a taller toolbar to account for the Home Indicator. As with compatibility mode, the narrower app in an uneven split is 375 points wide on both the new 11" and 12.9" devices in landscape and 320 points wide in portrait:

Xcode 10.1 / iOS 12.1 build of Adaptivity running on 3rd gen 12.9" iPad simulator running iOS 12.1 in landscape

Slide Over

An updated app appears at the same size in Slide Over as an older app. Note, however, that the toolbar is 20 points taller (70 points instead of the 50 points that older apps see on the all iPads running iOS 12.x):

Xcode 10.1 / iOS 12.1 build of Adaptivity running in Slide Over on 11" iPad simulator running iOS 12.1 in landscape
Xcode 10.1 / iOS 12.1 build of Adaptivity running in Slide Over on 3rd gen 12.9" iPad simulator running iOS 12.1 in landscape

Conclusion

In a deviation from the norm, Apple have designed the new 11" and 12.9" iPads Pro to behave in an almost backwardly-compatible manner for multitasking-capable apps that were built with Xcode 10.0 or earlier. Older apps see full screen, split screen multitasking and Slide Over sizes which are unlike any previous or current device. Even apps that use auto layout and have launch storyboards will be shown in this compatibility mode.

More Resources

Apple have produced two short videos to help developers make their apps work well with the new iPad Pro devices and Apple Pencil:

How Did I Run Xcode 10.0 / iOS 12.0 apps on iOS 12.1 Simulators?

You might be wondering how I was able to capture screenshots from the Xcode 10.1 / iOS 12.1 simulators with apps built with Xcode 10.0. 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.

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