Designing for iPhone X
Screen Size:
Designing for iPhone X
Screen Size:
iPhone X’s 5.8-inch super retina display gives you more space to display content. The display on iPhone X is 145pt taller than a 4.7" display of iPhone 6, iPhone 7, and iPhone 8, resulting in roughly 20% additional vertical space for content.
Width: 375 points
Height: 812 points
On a 3x display, this equals 1125 by 2436 pixels.
Notes:
- iPhone X ‘s display has a 3x image scale factor.
- Use PDF for delivering image assets.
- For rasterized images, include both 2x and 3x resolutions.
iPhone X’s signature display notch:
One of the signature features of the iPhone X that is the display notch and the rounded corners. The display notch is about branding that distinguishes the iPhone X from other phones in the market. Developers and Designers have already started adopting the notch into their apps.
Notes:
- Ensure that layouts fill the screen and aren’t obscured by the device’s rounded corners, sensor housing, or the indicator for accessing the Home screen.
- Status bars are taller on iPhone X.
Hello Home Indicator
On iPhone X, the app switcher and the Home screen are accessed by swiping up anywhere along the bottom edge of the display. An indicator at the bottom of the screen offers a hint about this interaction.The indicator appears dark against lighter backgrounds, and light against darker backgrounds. The background material of the tab bar and toolbar is extended to the bottom.
Notes:
- Avoid placing interface elements in close proximity to the indicator.
- Turn on edge protection for the bottom edge of the display if an app needs swipe at the bottom. So a user needs to swipe twice to access the home screen.
For more information: