How iOS Apps Adapt to the iPhone X Screen Size

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.

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.

Xcode 8 / iOS 10 build of Adaptivity running on iPhone 7 simulator running iOS 11 in portrait
Xcode 8 / iOS 10 build of Adaptivity running on iPhone 7 simulator running iOS 11 in portrait
Xcode 8 / iOS 10 build of Adaptivity running on iPhone X simulator running iOS 11 in portrait
Xcode 8 / iOS 10 build of Adaptivity running on iPhone X simulator running iOS 11 in landscape

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):

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

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:

--

--

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