Design Website In Iphone Image

Adaptivity and Layout

People generally want to be able to use their favorite apps on all of their devices and in any context. To meet this expectation, design an adaptable interface by configuring UI elements and layouts to automatically change shape and size on different devices, during multitasking on iPad, in split view, when the screen rotates, and more.

Device Screen Sizes and Orientations

iOS devices have a variety of screen sizes and people can use them in either portrait or landscape orientation. In edge-to-edge devices like iPhone X and iPad Pro, the display has rounded corners that closely match the device's overall dimensions. Other devices — such as iPhone SE and iPad Air — have a rectangular display.

If your app runs on a specific device, make sure it runs on every screen size for that device. In other words, an iPhone-only app must run on every iPhone screen size and an iPad-only app must run on every iPad screen size.

Diagram of iPad and two models of iPhone, each in portrait and landscape orientation.

Device	Dimensions (portrait)
12.9" iPad Pro	1024x1366 pt (2048x2732 px @2x)
11" iPad Pro	834x1194 pt (1668x2388 px @2x)
10.5" iPad Pro	834x1194 pt (1668x2388 px @2x)
9.7" iPad Pro	768x1024 pt (1536x2048 px @2x)
7.9" iPad mini	768x1024 pt (1536x2048 px @2x)
10.5" iPad Air	834x1112 pt (1668x2224 px @2x)
9.7" iPad Air	768x1024 pt (1536x2048 px @2x)
10.2" iPad	810x1080 pt (1620x2160 px @2x)
9.7" iPad	768x1024 pt (1536x2048 px @2x)
iPhone 12 Pro Max	428x926 pt (1284x2778 px @3x)
iPhone 12 Pro	390x844 pt (1170x2532 px @3x)
iPhone 12	390x844 pt (1170x2532 px @3x)
iPhone 12 mini	375x812 pt (1125x2436 px @3x)
iPhone 11 Pro Max	414x896 pt (1242x2688 px @3x)
iPhone 11 Pro	375x812 pt (1125x2436 px @3x)
iPhone 11	414x896 pt (828x1792 px @2x)
iPhone XS Max	414x896 pt (1242x2688 px @3x)
iPhone XS	375x812 pt (1125x2436 px @3x)
iPhone XR	414x896 pt (828x1792 px @2x)
iPhone X	375x812 pt (1125x2436 px @3x)
iPhone 8 Plus	414x736 pt (1080x1920 px @3x)
iPhone 8	375x667 pt (750x1334 px @2x)
iPhone 7 Plus	414x736 pt (1080x1920 px @3x)
iPhone 7	375x667 pt (750x1334 px @2x)
iPhone 6s Plus	414x736 pt (1080x1920 px @3x)
iPhone 6s	375x667 pt (750x1334 px @2x)
iPhone 6 Plus	414x736 pt (1080x1920 px @3x)
iPhone 6	375x667 pt (750x1334 px @2x)
4.7" iPhone SE	375x667 pt (750x1334 px @2x)
4" iPhone SE	320x568 pt (640x1136 px @2x)
iPod touch 5th generation and later	320x568 pt (640x1136 px @2x)

NOTE All scale factors in the table above are UIKit scale factors, which may differ from native scale factors. For developer guidance, see scale and nativeScale.

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 eight points below an image, regardless of the available screen space.

Diagram of an iPhone that displays a blue area that fills the available screen space. The blue area is overlaid by two lines with arrows on both ends that intersect at the center point of the screen.

Auto Layout automatically readjusts layouts according to the constraints you specify for certain environmental variations, known as traits. You can set your app to dynamically adapt to a wide range of traits, including:

Different device screen sizes, resolutions, and color gamuts (sRGB/P3)
Different device orientations (portrait/landscape)
Split view
Multitasking modes on iPad
Dynamic Type text-size changes
Internationalization features that are enabled based on locale (left-to-right/right-to-left layout direction, date/time/number formatting, font variation, text length)
System feature availability (3D Touch)

For developer guidance, see NSLayoutConstraint and UITraitCollection.

Layout Guides and Safe Areas

A layout guide defines a rectangular region that helps you position, align, and space your content on the screen. 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.

A safe area defines the area within a view that isn't covered by a navigation bar, tab bar, toolbar, or other views a view controller might provide.

iOS 15 and later defines a keyboard layout guide that represents the space the keyboard currently occupies and accounts for safe area insets. Using this guide can help you make the keyboard feel like an integral part of your app, regardless of the type of keyboard people use or where they position it. For developer guidance, see UIKeyboardLayoutGuide.

When the keyboard is visible, the layout guide represents its area and position.

When the keyboard dismisses, the top of the layout guide matches the bottom of the safe area layout guide.

Adhere to the system-defined safe areas and layout margins. 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 Positioning Content Relative to the Safe Area and Positioning Content Within Layout Margins.

Size Classes

Size classes are traits 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 — such as when the device rotates 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.

Diagram of an iPad and an iPhone in both portrait and landscape orientations. Each device in each orientation includes a red outline around the available full-screen area for that orientation and arrowed lines that indicate the height and width of the area.

Device	Portrait orientation	Landscape orientation
12.9" iPad Pro	Regular width, regular height	Regular width, regular height
11" 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	Regular width, regular height	Regular width, regular height
iPhone 12 Pro Max	Compact width, regular height	Regular width, compact height
iPhone 12 Pro	Compact width, regular height	Compact width, compact height
iPhone 12	Compact width, regular height	Compact width, compact height
iPhone 12 mini	Compact width, regular height	Compact width, compact height
iPhone 11 Pro Max	Compact width, regular height	Regular width, compact height
iPhone 11 Pro	Compact width, regular height	Compact width, compact height
iPhone 11	Compact width, regular height	Regular width, compact height
iPhone XS Max	Compact width, regular height	Regular width, compact height
iPhone XS	Compact width, regular height	Compact width, compact height
iPhone XR	Compact width, regular height	Regular width, compact 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
iPod touch 5th generation and later	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.

Diagram of iPad in landscape orientation with the left two-thirds of its screen shaded in yellow.

2/3 split view

Diagram of iPad in landscape orientation with the left half of its screen shaded in yellow.

1/2 split view

Diagram of iPad in landscape orientation with left one-third of its screen shaded in yellow.

1/3 split view

Device	Mode	Portrait orientation	Landscape orientation
12.9" iPad Pro	2/3 split view	Compact width, regular height	Regular width, regular height
	1/2 split view	N/A	Regular width, regular height
	1/3 split view	Compact width, regular height	Compact width, regular height
11" iPad Pro	2/3 split view	Compact width, regular height	Regular width, regular height
	1/2 split view	N/A	Compact 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	N/A	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	N/A	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	N/A	Compact width, regular height
	1/3 split view	Compact width, regular height	Compact width, regular height

General Layout Considerations

Ensure that 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, near the leading side.

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.

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.

Be prepared for text-size changes. People expect most apps to respond 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.

Diagram of a toolbar at the bottom edge of an iPhone screen. The leftmost icon is overlaid by a yellow disk, representing a fingertip, that doesn't overlap any other icons. Below the diagram, a green checkmark in a circle indicates this is the recommended style of layout.

Diagram of a toolbar at the bottom edge of an iPhone screen. The leftmost icon is overlaid by a small yellow disk, representing a partial fingertip, that overlaps the icon to the right. Below the diagram, a red X in a circle indicates the layout is not recommended.

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

Image of a user's Favorites list in the Phone app on a 4.7 inch iPhone.

4.7" iPhone

Image of a user's Favorites list in the Phone app on a 5.8 inch iPhone.

5.8" iPhone

Preview your app on multiple devices. Although it's generally best to preview features like wide color imagery on actual devices, you can use Simulator (included with Xcode) to check for clipping and other layout issues. For example, if your app supports landscape mode, you can use Simulator to make sure your layouts look great regardless of whether the device rotates left or right.

NOTE By default, view controllers support all orientations on iPad and all orientations except upside-down portrait on iPhone (for developer guidance, see supportedInterfaceOrientations). Some devices, such as iPhone X, don't support upside-down portrait mode, regardless of whether your app supports it.

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

Adapting to Changes in Context

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

Avoid gratuitous layout changes. When someone rotates a device, the entire layout doesn't have 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 it's essential that your app run only in landscape, support both variants. Your landscape-only app should run equally well whether people rotate their device to the left or the right. Don't tell people to rotate their device when they use your app. If your app doesn't rotate automatically when someone holds the device in an unsupported orientation, they'll know instinctively to rotate it.

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.

Aim to support both iPad and iPhone. People appreciate having the flexibility to run your app on either type of iOS device. If certain features of your app require iPhone-specific hardware — like telephony — consider hiding or disabling those features on iPad and letting people use your app's other features.

Diagram of a tree image displayed fullscreen on a 4.7 inch iPhone. The tree image is full size.

Full-screen 4.7" device image

Diagram of a tree image displayed fullscreen on a 5.8 inch iPhone. The tree image is scaled up and cropped at the left and right edges.

Cropping on 5.8" device

Diagram of a tree image displayed fullscreen on a 5.8 inch iPhone. The tree image is scaled down and letterboxed at the top and bottom edges.

Letterboxing on 5.8" device

Diagram of a tree image displayed fullscreen on a 5.8 inch iPhone. The tree image is full size.

Full-screen 5.8" device image

Diagram of a tree image displayed fullscreen on a 4.7 inch iPhone. The tree image is full size and is cropped at the top and bottom edges.

Cropping on a 4.7" device

Diagram of a tree image displayed fullscreen on a 4.7 inch iPhone. The tree image is scaled down and is pillarboxed at the left and right edges.

Pillarboxing on a 4.7" device

Be mindful of aspect ratio differences when reusing existing artwork. Different screen sizes may have different aspect ratios, causing artwork to appear cropped, letterboxed, or pillarboxed. Make sure that important visual content remains in view on all display sizes.

Designing a Full-Screen Experience

Extend visual elements to fill the screen. 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.

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 features like 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.

Diagram of an iPhone in landscape orientation with a blue rectangle that indicates the safe area and vertical pink strips that indicate the left and right margins. Dark gray disks in each corner and yellow striped rectangles to the left and right of the indicator for accessing the Home screen indicate areas that should not contain controls.

Inset essential content to prevent clipping. In general, content should be centered and symmetrically inset so it looks great in any orientation, isn't clipped by rounded corners, isn't hidden by a sensor housing, and isn't 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 and adhere to the system-defined layout guides and safe areas. When the device is in landscape orientation, it may be appropriate for some apps — like games — to place tappable controls in the lower portion of the screen (extending below the safe area) to allow more room for content. Use matching insets when placing controls at the top and bottom of the screen, and leave ample space around the Home indicator so people don't accidentally target it when trying to interact with a control. Because the Home indicator remains centered on the screen, its location relative to your app's interface may change.

Inset full-width buttons. A button that extends to the edges of the screen might not look like a button. Respect the standard system-defined margins on the sides of full-width buttons. A full-width button appearing at the bottom of the screen looks best when it has rounded corners and is aligned with the bottom of the safe area — which also ensures that it doesn't conflict with the Home indicator.

Don't mask or call special attention to key display features. Don't attempt to hide a 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.

Be mindful of the status bar height. The status bar is taller on full-screen iPhone models than on other models. 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 current device. Note that the status bar on a full-screen iPhone doesn't change height when background tasks like voice recording and location tracking are active.

If you currently hide the status bar, reconsider that decision when your app runs on a full-screen iPhone. Full-screen iPhone models have more vertical space for content than other models, 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.

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 people touch the screen again. This behavior should be enabled only for passive viewing experiences like playing videos or photo slideshows.

Additional Layout Considerations

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