How iOS Apps Adapt to the iPhone X Screen Size
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.
The ways in which app developers implicitly or explicitly declare how forward-compatible their apps are is not the focus of this article. The version of Xcode an app is built with (and therefore the version of iOS it targets), the presence of a launch screen storyboard and certain Info.plist keys are the most important factors. What I want to discuss here is the new iPhone X and how it behaves when running both older and updated apps.
iPhone X
The iPhone X is physically different to other iPhones in many ways, but only some of these are important to how an app sees the device from a developer’s perspective:
- it is a true 3x device: 1 point is a 3×3 square of pixels on screen
- the screen size is different: 375×812 points (1125×2436 pixels).
- the screen’s aspect ratio is different: it has the same width (in points, not actual physical size) as the iPhone 6/6s/7/8, but is noticeably taller. Since 2012’s iPhone 5, all iPhones have had an approximately 9:16 aspect ratio (measured as portrait width:height). The earlier 3.5" iPhones were 2:3. The iPhone X is approximately 9:19.5.
- the notch: the status bar is split either side of a cutout area that houses the front camera, earpiece and other sensors.
How does the iPhone X display apps on its distinctive screen? That depends on which version of Xcode the apps were built with.
Xcode 8 / iOS 10 and Earlier
Apps that were built with Xcode 8 or earlier (i.e. targetting iOS 10 or earlier) are unaware of the existence of iOS 11’s large navigation bar titles and the new screen size of the iPhone X. Note, however, that 3× assets will be used, if available.
As a reference, here’s how an iOS 10 app appears on the iPhone 6/6s/7/8 devices at their native resolution (i.e. with Display Zoom disabled):
This shows the familiar 375×667 point portrait screen size of the 4.7" iPhones, with regular heights for the navigation bar (incorporating the 20pt status bar) and toolbar.
In landscape the status bar is hidden by default and the bars are reduced in height:
The same Xcode 8 / iOS 10 app running on the new iPhone X is letterboxed in portrait and has slightly rounded corners:
The status bar is still up by the notch, but the app sees the screen as the exact same size as a 4.7" iPhone 6/6s/7/8. The navigation bar is still 64 points tall, as if there were a status bar. This is Apple’s backwards compatibility at work!
In landscape, as you would expect, the app is pillar boxed but is also being zoomed down slightly on screen in order to leave space for the new grab handle at the bottom.
This means an app’s assets will not be displayed pixel perfect in landscape. The high pixel density should make this difficult to see in normal use.
Xcode 9 / iOS 11
When built with the Gold Master version of Xcode 9, apps sees the true nature of the iPhone X screen, shown here with default navigation bar titles and iOS 11’s new large titles (which are only large in portrait on iPhones):
The toolbar is almost twice the normal height (83 points versus 44 points).
In landscape, the navigation bar is reduced in height as usual, but the toolbar has an extra 21 points to leave space for the grab handle. Note too that the layout margins are increased from 20 to 64 points:
Conclusion
As widely expected, Apple have designed the iPhone X and iOS 11 to behave in a backwardly-compatible manner for apps that were built with Xcode 8 and can’t reasonably be expected to be able to handle the new device. Even apps that use auto layout and have launch storyboards will be shown in the middle of the screen. Rebuilding with Xcode 9 opts the developer into the new screen design.
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
If you’re an iOS developer you might be interested in other articles in this series that show how apps adapt to newer device sizes depending on which Xcode version they are built with:
- How iPad Apps Adapt to the New 10.2" iPad
- How iPad Apps Adapt to the New 11" and 12.9" iPads Pro
- How Apps Adapt to the Series 4 Apple Watch Screen Sizes
- How iOS Apps Adapt to the iPhone XS Max and iPhone XR Screen Sizes
There is an iPhone-only version of Adaptivity to show How iPhone-only Apps Appear on iPad (it changed in iOS 12).
You may not have realised that there were iPad Navigation Bar and Toolbar Height Changes in iOS 12. You must certainly have noticed the View Controller Presentation Changes in iOS 13.
I have also written about External Display Support on iOS and Working with Multiple Versions of Xcode.
If you found any of these articles helpful then please take a look at my apps in the iOS App Store to see if there’s anything that you’d like to download (especially the paid ones 😀). If you work with a lot of Xcode projects you might like my Mac Menu Bar utility XcLauncher.
