Adaptivity and Layout

People generally want the ability to use their favorite apps on all of their devices and in any context. In iOS, interface elements and layouts can be configured to automatically change shape and size on different devices, during multitasking on iPad, in split view, when the screen is rotated, and more. It’s essential that you design an adaptable interface that provides a great experience in any environment.

Device Screen Sizes and Orientations

iOS devices come in a variety of different screen sizes and can be used in either portrait or landscape orientation.

Device Portrait dimensions Landscape dimensions
12.9" iPad Pro 2048px × 2732px 2732px × 2048px
10.5" iPad Pro 1668px × 2224px 2224px × 1668px
9.7" iPad 1536px × 2048px 2048px × 1536px
7.9" iPad mini 4 1536px × 2048px 2048px × 1536px
iPhone X 1125px × 2436px 2436px × 1125px
iPhone 8 Plus 1242px × 2208px 2208px × 1242px
iPhone 8 750px × 1334px 1334px × 750px
iPhone 7 Plus 1242px × 2208px 2208px × 1242px
iPhone 7 750px × 1334px 1334px × 750px
iPhone 6s Plus 1242px × 2208px 2208px × 1242px
iPhone 6s 750px × 1334px 1334px × 750px
iPhone SE 640px × 1136px 1136px × 640px

To learn how screen resolution impacts your app's artwork, see Image Size and Resolution.

Auto Layout

Auto Layout is a development tool for constructing adaptive interfaces. Using Auto Layout, you can define rules (known as constraints) that govern the content in your app. For example, you can constrain a button so it's always horizontally centered and positioned 8 points below an image, regardless of the available screen space.

Auto Layout automatically readjusts layouts according to the specified constraints when certain environmental variations (known as traits) are detected. You can set your app to dynamically adapt to a wide range of traits including:

For developer guidance, see Auto Layout Guide and UITraitCollection.

Layout Guides and Safe Area

Layout guides define rectangular regions that don't actually appear visibly onscreen, but aid with the positioning, alignment, and spacing of content. The system includes predefined layout guides that make it easy to apply standard margins around content and restrict the width of text for optimal readability. You can also define custom layout guides.

Adhere to the safe area and layout margins defined by UIKit. These layout guides 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. Standard system-provided views automatically adopt a safe area layout guide.

For developer guidance, see UILayoutGuide, layoutMarginsGuide, readableContentGuide, and safeAreaLayoutGuide.

Size Classes

Size classes are traits that that are automatically assigned to content areas based on their size. The system defines two size classes, regular (denotes expansive space) and compact (denotes constrained space), which describe the height and width of a view.

A view may possess any combination of size classes:

  • Regular width, Regular height
  • Compact width, Compact height
  • Regular width, Compact height
  • Compact width, Regular height

As with other environmental variations, iOS dynamically makes layout adjustments based on the size classes of a content area. For example, when the vertical size class changes from compact height to regular height, perhaps because the user rotated the device from landscape to portrait orientation, tab bars may become taller.

Device Size Classes

Different size class combinations apply to the full-screen experience on different devices, based on screen size.

Device Portrait orientation Landscape orientation
12.9" iPad Pro Regular width, Regular height Regular width, Regular height
10.5" iPad Pro Regular width, Regular height Regular width, Regular height
9.7" iPad Regular width, Regular height Regular width, Regular height
7.9" iPad mini 4 Regular width, Regular height Regular width, Regular height
iPhone X Compact width, Regular height Compact width, Compact height
iPhone 8 Plus Compact width, Regular height Regular width, Compact height
iPhone 8 Compact width, Regular height Compact width, Compact height
iPhone 7 Plus Compact width, Regular height Regular width, Compact height
iPhone 7 Compact width, Regular height Compact width, Compact height
iPhone 6s Plus Compact width, Regular height Regular width, Compact height
iPhone 6s Compact width, Regular height Compact width, Compact height
iPhone SE Compact width, Regular height Compact width, Compact height

Multitasking Size Classes

On iPad, size classes also apply when your app runs in a multitasking configuration.

2/3 split view

1/2 split view

1/3 split view

Device Mode Portrait orientation Landscape orientation
12.9" iPad Pro 2/3 split view Regular width, Regular height Regular width, Regular height
1/2 split view Compact width, Regular height Regular width, Regular height
1/3 split view Compact width, Regular height Compact width, Regular height
10.5" iPad Pro 2/3 split view Compact width, Regular height Regular width, Regular height
1/2 split view Compact width, Regular height Compact width, Regular height
1/3 split view Compact width, Regular height Compact width, Regular height
9.7" iPad 2/3 split view Compact width, Regular height Regular width, Regular height
1/2 split view Compact width, Regular height Compact width, Regular height
1/3 split view Compact width, Regular height Compact width, Regular height
7.9" iPad mini 4 2/3 split view Compact width, Regular height Regular width, Regular height
1/2 split view Compact width, Regular height Compact width, Regular height
1/3 split view Compact width, Regular height Compact width, Regular height

Layout Considerations

Maintain focus on the current content during context changes. Content is your highest priority. Changing focus when the environment changes can be disorienting, frustrating, and make people feel like they’ve lost control of the app.

Ensure primary content is clear at its default size. People shouldn’t have to scroll horizontally to read important text, or zoom to see primary images, unless they choose to change the size.

Maintain an overall consistent appearance throughout your app. In general, elements with similar functions should look similar.

Use visual weight and balance to convey importance. Large items catch the eye and appear more important than smaller ones. Larger items are also easier to tap, which is especially important when an app is used in distracting surroundings, such as in the kitchen or a gym. In general, place principal items in the upper half of the screen and—in a left-to-right reading context—near the left side of the screen.

Use alignment to ease scanning and to communicate organization and hierarchy. Alignment makes an app look neat and organized, helps people focus while scrolling, and makes it easier to find information. Indentation and alignment can also indicate how groups of content are related.

Extend visual elements to fill the screen. Your app should take advantage of all available screen space.

Ensure adequate margins and spacing around content. In general, content should be comfortably spaced and inset slightly from the edges of the screen. In general, content works best centered and symmetrically inset so it looks good in any orientation. For best results, use standard, system-provided interface elements, Auto Layout, standard margins, and adhere to safe area layout guides.

Apply readability margins when displaying text on larger devices. These margins keep text lines short enough to ensure a comfortable reading experience.

Provide ample touch targets for interactive elements. Try to maintain a minimum tappable area of 44pt x 44pt for all controls.

Avoid gratuitous layout changes. Just because someone rotates a device doesn’t mean the entire layout needs to change. For example, if your app shows a grid of images in portrait mode, it doesn’t have to present the same images as a list in landscape mode. Instead, it might simply adjust the dimensions of the grid. Try to maintain a comparable experience in all contexts.

If possible, support both portrait and landscape orientations. People prefer to use apps in different orientations, so it’s best when you can fulfill that expectation.

If your app supports only one orientation, support both variants. If it’s essential that your app run in a single orientation, make sure it supports both orientation variants. For example, if your app only runs in landscape mode, it should be usable regardless of whether the user rotated the device left or right. If the device is rotated 180 degrees while using your app, your app should respond by rotating its content 180 degrees. If your app doesn't rotate automatically when someone holds the device wrong, they'll know instinctively to rotate it. You don't need to tell them.

Customize your app’s response to rotation according to context. A game that lets people move a character by rotating the device, for example, probably shouldn’t switch orientations during gameplay. It could, however, display menus and intro sequences based on the current orientation.

Be prepared for text size changes. People expect most apps to respond appropriately when they choose a different text size in Settings. To accommodate some text-size changes, you might need to adjust the layout. For more information about text usage in your app, see Typography.