iPhone X

iPhone X includes a large, high-resolution, rounded, edge-to-edge Super Retina display that delivers an immersive, content-rich experience like never before.

Screen Size

In portrait orientation, the width of the display on iPhone X matches the width of the 4.7" displays of iPhone 6, iPhone 7, and iPhone 8. The display on iPhone X, however, is 145pt taller than a 4.7" display, resulting in roughly 20 percent additional vertical space for content.

Portrait dimensions Landscape dimensions
1125px × 2436px (375pt × 812pt @3x) 2436px × 1125px (812pt × 375pt @3x)

Supply high-resolution images for all artwork in your app. iPhone X has a high-resolution Super Retina display with a scale factor of @3x. For glyphs and other flat, vector artwork, it's best to provide resolution-independent PDFs. For rasterized artwork, provide both @3x and @2x versions of your artwork. See Image Size and Resolution and Custom Icons.

Layout

When designing for iPhone X, you must ensure that layouts fill the screen and aren't obscured by the device's rounded corners, its sensor housing, or the indicator for accessing the Home screen.

Most apps that use standard, system-provided UI elements like navigation bars, tables, and collections automatically adapt to the device's new form factor. Background materials extend to the edges of the display, and UI elements are appropriately inset and positioned.

4.7" iPhone

iPhone X

For apps with custom layouts, supporting iPhone X should also be relatively easy, especially if your app uses Auto Layout and adheres to safe area and margin layout guides.

Preview your app on iPhone X. You can use Simulator (included with Xcode) to preview your app and check for clipping and other layout issues. If your app supports landscape mode, make sure your layouts look great regardless of whether the device was rotated left or right. Upside-down portrait mode is not supported on iPhone X. Some features, like wide color imagery, are best previewed on actual devices.

Provide a full-screen experience. Make sure backgrounds extend to the edges of the display, and that vertically scrollable layouts, like tables and collections, continue all the way to the bottom.

Inset essential content to prevent clipping. In general, content should be centered and symmetrically inset so it looks great in any orientation and isn't clipped by corners or the device's sensor housing, or obscured by the indicator for accessing the Home screen. For best results, use standard, system-provided interface elements and Auto Layout to construct your interface. All apps should adhere to the safe area and layout margins defined by UIKit, which ensure appropriate insetting based on the device and context. The safe area also prevents content from underlapping the status bar, navigation bar, toolbar, and tab bar.

Be mindful of the status bar height. The status bar is taller on iPhone X than on other iPhones. If your app assumes a fixed status bar height for positioning content below the status bar, you must update your app to dynamically position content based on the user's device. Note that the status bar on iPhone X doesn't change height when background tasks like voice recording and location tracking are active.

If your app currently hides the status bar, reconsider that decision for iPhone X. The display height on iPhone provides more vertical space for content than the displays of 4.7" iPhones, and the status bar occupies an area of the screen your app probably won't fully utilize. The status bar also displays information people find useful. It should only be hidden in exchange for added value.

Full-screen 4.7" device image

Cropping on iPhone X

Letterboxing on iPhone X

Full-screen iPhone X image

Cropping on a 4.7" device

Pillarboxing on a 4.7" device

Be mindful of aspect ratio differences when reusing existing artwork. iPhone X has a different aspect ratio than 4.7" iPhones. As a result, full-screen 4.7" iPhone artwork appears cropped or letterboxed when displayed full-screen on iPhone X. Likewise, full-screen iPhone X artwork appears cropped or pillarboxed when displayed full-screen on a 4.7" iPhone. Make sure that important visual content remains in view on both display sizes.

Avoid explicitly placing interactive controls at the very bottom of the screen and in corners. People use swipe gestures at the bottom edge of the display to access the Home screen and app switcher, and these gestures may cancel custom gestures you implement in this area. The far corners of the screen can be difficult areas for people to reach comfortably.

Don't mask or call special attention to key display features. Don't attempt to hide the device's rounded corners, sensor housing, or indicator for accessing the Home screen by placing black bars at the top and bottom of the screen. Don't use visual adornments like brackets, bezels, shapes, or instructional text to call special attention to these areas, either.

Allow auto-hiding of the indicator for accessing the Home screen sparingly. When auto-hiding is enabled, the indicator fades out if the user hasn't touched the screen for a few seconds. It reappears when the user touches the screen again. This behavior should be enabled only for passive viewing experiences like playing videos or photo slideshows.

See Adaptivity and Layout.

Color

The display on iPhone X supports a P3 color space, which can produce richer, more saturated colors than sRGB.

Use wide color to enhance the visual experience. Photos and videos that use wide color are more lifelike, and visual data and status indicators that use wide color are more impactful. See Color Management.

Video

The system-provided video player offers two viewing modes: full-screen (aspect fill) and fit-to-screen (aspect). By default, the system selects a viewing mode based on a video's aspect ratio, and the user can switch modes during playback. For developer guidance, see AVPlayerViewController.

Full-screen (aspect-fill) viewing mode. The video scales to fill the display. Some edge cropping may occur. This is the default viewing mode for wide video (2:1 through 2.40:1). For developer guidance, see resizeAspectFill.

Fit-to-screen (aspect) viewing mode. The entire video is visible onscreen. Letterboxing or pillarboxing will occur. This is the default viewing mode for standard video (4:3, 16:9, and anything up to 2:1) and ultra-wide video (anything above 2.40:1). For developer guidance, see resizeAspect.

Make sure custom video players behave as expected. The objective is to fill the display by default when playing video content on iPhone X. However, if filling the display results in too much cropping, the video should be scaled to fit the screen. You should also allow users to switch between full-screen and fit-to-screen viewing based on their individual preferences. For developer guidance, see AVPlayerLayer.

Always display video content at its original aspect ratio. If your video content uses embedded letterbox or pillarbox padding to conform to a specific aspect ratio, iOS will be unable to correctly scale the video based on the user's choice of viewing modes. Padding embedded within the video frame can cause videos to appear smaller in full-screen mode and fit-to-screen mode. It also prevents videos from being displayed correctly in edge-to-edge, non-full-screen contexts, like Picture in Picture mode on iPad.

Gestures

The display on iPhone X uses screen-edge gestures to provide access to the Home screen, app switcher, Notification Center, and Control Center.

Avoid interfering with systemwide screen-edge gestures. People rely on these gestures to work in every app. In rare cases, immersive apps like games might require custom screen-edge gestures that take priority over the system's gestures—the first swipe invokes the app-specific gesture and a second swipe invokes the system gesture. This behavior (known as edge protect) should be implemented sparingly, as it makes it harder for people to access the system-level actions. See Gestures.

Additional Design Considerations

Reference authentication methods accurately. iPhone X supports Face ID for authentication. If your app integrates with Apple Pay or other system authentication features, don't reference Touch ID on iPhone X. Likewise, make sure your app doesn't refer to Face ID on devices that support Touch ID. See Authentication.

Don't duplicate system-provided keyboard features. On iPhone X, the Emoji/Globe key and the Dictation key automatically appear beneath the keyboard—even when using custom keyboards. Your app can't affect these keys, so avoid causing confusion by repeating them in your keyboard. See Custom Keyboards.

Make sure your website looks great on the edge-to-edge display of iPhone X. See Designing Websites for iPhone X on webkit.org.

Resources

Download iPhone X UI design templates for Photoshop and Sketch in Resources.

Learn More

For related design and developer guidance, watch the following videos: