iOS Device Compatibility Reference
Displays
The display is a key part of the great user experience on iOS devices. Users interact with the display surface, and see the results after an app reacts to these touches and updates the displayed image. Apple continues to improve the display hardware and software pipeline that drives the display, so understanding the display characteristics is often a critical part of creating a great user experience.
iOS Device Display Summary
Table 2-1 summarizes the physical dimensions of iOS displays and how those pixels are mapped to the logical coordinate system in UIKit.
Native Resolution (Pixels)
UIKit Size (Points)
Native Scale factor
UIKit Scale factor
iPad Pro 12.9-inch (2nd generation)
iPad Pro 10.5-inch
iPad Pro (12.9-inch)
iPad Pro (9.7-inch)
At runtime, use the bounds and scale properties of a UIScreen object to understand how UIKit present the display to your app, and the nativeBounds and nativeScale when you need to work with the exact number of pixels on the display.
If the native scale differs from the UIKit scale factor, then iOS first renders the content at the UIKit scale factor and then scales it to fit into the native number of pixels on the screen. For games and other apps that perform many calculations per pixel, rendering these additional pixels can be expensive. Instead, configure a view to render at the native scale instead. For more information on how to do this in Metal, see Native Screen Scale (iOS and tvOS) .
Table 2-2 describes the ability to reproduce color and adapt the color display to the environment around the device.
Native Color Space
Active Color Management
iPad Pro 12.9-inch (2nd generation)
iPad Pro 10.5-inch
iPad Pro (12.9-inch)
iPad Pro (9.7-inch)
The P3 Display color space has a larger color gamut than an sRGB color space, with more saturated reds and greens. For information on supporting wide color in your app, see WWDC 2016 — Session 712: Working with Wide Color .
A True Tone display uses advanced ambient light sensors to automatically adapt the color and intensity of the display to match the light in the surrounding environment. Different kinds of apps many need to react to these changes differently. To specify how the display should adapt when your app is frontmost, see UIWhitePointAdaptivityStyle .
Table 2-3 describes the rate at which the hardware can adjust the contents of the screen.
Recommended Frame Rates
iPad Pro 12.9-inch (2nd generation)
120, 60, 40, 30, 24, 20
iPad Pro 10.5-inch
120, 60, 40, 30, 24, 20
iPad Pro (12.9-inch)
iPad Pro (9.7-inch)
Under most circumstances, UIKit handles redrawing and animation for you, adjusting the frame rate as necessary to provide a good viewing experience with reasonable energy usage. However, when you configure a view animation, you can optionally specify a hint when you know that the animation should run at a higher or lower rate. For more information, see UIViewAnimationOptions .
In full screen apps and games, animation is often driven explicitly using a CADisplayLink object. Set the display link’s preferredFramesPerSecond property to the frame rate you want, ideally using one of the preferred values specified in Table 2-3 . SpriteKit, SceneKit, or MetalKit also provide this property on the the SKView , SCNView , and MTKView classes. For more information on animating content in Metal, see Frame Rate (iOS and tvOS) .
Table 2-4 summarize the how often the display register touches from fingers or Apple Pencil and delivers them to UIKit.
Touch Sample Rate
Apple Pencil Sample Rate
Touch Delivery Rate
iPad Pro 12.9-inch (2nd generation)
iPad Pro 10.5-inch
iPad Pro (12.9-inch)
iPad Pro (9.7-inch)
The display hardware periodically captures data from sensors embedded in the screen. When a user touches the screen, the sensor information is recorded, processed, and delivered to UIKit. On displays that support 3D Touch, additional information about how much pressure the user applied to the display is also recorded. Only some displays support Apple Pencil. On these displays, the capture rate is different when reading Apple Pencil events than the capture rate for finger touches, and additional stylus information, such as the azimuth, is also recorded in each event.
When the capture rate is higher than the delivery rate, multiple events are coalesced into one touch event whose location reflects the most recent touch. However, the additional touch information is available for apps that need more precision.
For more information on event handling, coalesced touches, 3D Touch, and Apple Pencil, see Event Handling Guide for iOS .
Display Features Overview
These subsections provide further details on the features listed in iOS Device Display Summary above.
Screen Geometry
Use the nativeBounds , bounds , nativeScale , and scale properties of a UIScreen object to retrieve the characteristics of a display.
If the native scale differs from the UIKit scale factor, then iOS first renders any content at the UIKit scale factor and then downsamples it to fit on the screen. For games and other apps that perform many calculations per pixel, rendering these additional pixels can be expensive. Instead, use a view that is configured to render at the native scale instead. For more information on how to do this in Metal, see Native Screen Scale (iOS and tvOS) .
Color Reproduction
The P3 Display color space has a larger color gamut than an sRGB color space, with more saturated reds and greens. For information on how to support wide color in your app, see WWDC 2016 — Session 712: Working with Wide Color .
A True Tone display uses advanced ambient light sensors to automatically adapt the color and intensity of the display to match the light in the surrounding environment. You can configure your app to define how the display’s white point is adjusted when your app is front most. For more information, see UIWhitePointAdaptivityStyle .
Display Refresh
Under most circumstances, UIKit handles redrawing and animation for you, adjusting the frame rate as necessary to provide a good viewing experience with reasonable energy usage. However, when you configure a view animation, you can optionally specify a hint that specifies whether that animation should run at a higher or lower rate. For more information, see UIViewAnimationOptions .
In full screen apps and games, animation is often driven explicitly using a CADisplayLink object. Set the display link’s preferredFramesPerSecond property to the frame rate you want, ideally using one of the preferred values specified in Table 2-3 . SpriteKit, SceneKit, or MetalKit also provide this property on the the SKView , SCNView , and MTKView classes. For more information on animating content in Metal, see Frame Rate (iOS and tvOS) .
Touch Input
The display hardware periodically captures data from sensors embedded in the screen. When a user touches the screen, the sensor information is recorded, processed, and delivered to UIKit. On displays that support 3D Touch, additional information about how much pressure the user applied to the display is also recorded. On displays that support Apple Pencil, the capture rate is different when an Apple Pencil is in use, and additional stylus information, such as the azimuth, is also recorded.
When the capture rate is higher than the delivery rate, multiple events are coalesced into one touch event whose location reflects the most recent touch. However, the additional touch information is available for apps that need more precision.
For more information on event handling, coalesced touches, 3D Touch, and Apple Pencil, see UIKit .
Copyright © 2017 Apple Inc. All Rights Reserved. Terms of Use | Privacy Policy | Updated: 2017-10-30
Источник
Iphone all screen size
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.
| Device | Dimensions (portrait) |
|---|---|
| 12.9″ iPad Pro | 1024×1366 pt (2048×2732 px @2x) |
| 11″ iPad Pro | 834×1194 pt (1668×2388 px @2x) |
| 10.5″ iPad Pro | 834×1194 pt (1668×2388 px @2x) |
| 9.7″ iPad Pro | 768×1024 pt (1536×2048 px @2x) |
| 7.9″ iPad mini | 768×1024 pt (1536×2048 px @2x) |
| 10.5″ iPad Air | 834×1112 pt (1668×2224 px @2x) |
| 9.7″ iPad Air | 768×1024 pt (1536×2048 px @2x) |
| 10.2″ iPad | 810×1080 pt (1620×2160 px @2x) |
| 9.7″ iPad | 768×1024 pt (1536×2048 px @2x) |
| iPhone 13 Pro Max | 428×926 pt (1284×2778 px @3x) |
| iPhone 13 Pro | 390×844 pt (1170×2532 px @3x) |
| iPhone 13 | 390×844 pt (1170×2532 px @3x) |
| iPhone 13 mini | 375×812 pt (1125×2436 px @3x) |
| iPhone 12 Pro Max | 428×926 pt (1284×2778 px @3x) |
| iPhone 12 Pro | 390×844 pt (1170×2532 px @3x) |
| iPhone 12 | 390×844 pt (1170×2532 px @3x) |
| iPhone 12 mini | 375×812 pt (1125×2436 px @3x) |
| iPhone 11 Pro Max | 414×896 pt (1242×2688 px @3x) |
| iPhone 11 Pro | 375×812 pt (1125×2436 px @3x) |
| iPhone 11 | 414×896 pt (828×1792 px @2x) |
| iPhone X S Max | 414×896 pt (1242×2688 px @3x) |
| iPhone X S | 375×812 pt (1125×2436 px @3x) |
| iPhone X R | 414×896 pt (828×1792 px @2x) |
| iPhone X | 375×812 pt (1125×2436 px @3x) |
| iPhone 8 Plus | 414×736 pt (1080×1920 px @3x) |
| iPhone 8 | 375×667 pt (750×1334 px @2x) |
| iPhone 7 Plus | 414×736 pt (1080×1920 px @3x) |
| iPhone 7 | 375×667 pt (750×1334 px @2x) |
| iPhone 6s Plus | 414×736 pt (1080×1920 px @3x) |
| iPhone 6s | 375×667 pt (750×1334 px @2x) |
| iPhone 6 Plus | 414×736 pt (1080×1920 px @3x) |
| iPhone 6 | 375×667 pt (750×1334 px @2x) |
| 4.7″ iPhone SE | 375×667 pt (750×1334 px @2x) |
| 4″ iPhone SE | 320×568 pt (640×1136 px @2x) |
| iPod touch 5th generation and later | 320×568 pt (640×1136 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.
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)
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.
Источник
Viewport Sizes for iPhone
Apple iPhone have Retina Display, Which means iPhone screen shows 2x or 3x higher resolution display instead of normal display to our Eye.
In Retina display, ONE pixel may contains many more pixels, thats why Retina Display or Device Dimensions got bigger and we see high resolution of images and content in smaller display. However devices’ actual dimensions depends on actual Pixels Per Inch which is called «Viewport Size» of device or «device-width». Web designs for mobile or CSS responsive styles are based on viewport size of devices, Click here to see popular devices viewport table.
Here we list down all Apple iPhone models with their viewport size, resolution, pixel density, screen size and CSS media queries respectively:
| Device Name | Viewport SizePX | Device Resolution PX | Screen Size | Pixel Ratio | Density PPI | CSS PPI | Media Queries |
|---|---|---|---|---|---|---|---|
| Apple iPhone 12 mini | 360 x 780 | 1080 x 2340 | 5.4″ | 3.0 | 476 | 159 |  |
| Apple iPhone 12 Pro Max | 428 x 926 | 1284 x 2778 | 6.7″ | 3.0 | 458 | 153 | |
| Apple iPhone 12 Pro | 390 x 844 | 1170 x 2532 | 6.1″ | 3.0 | 460 | 153 | |
| Apple iPhone 12 | 390 x 844 | 1170 x 2532 | 6.1″ | 3.0 | 460 | 153 | |
| Apple iPhone SE (2020) | 375 x 667 | 750 x 1334 | 4.7″ | 2.0 | 326 | 163 | |
| Apple iPhone 11 Pro Max | 414 x 896 | 1242 x 2688 | 6.5″ | 3.0 | 458 | 153 | |
| Apple iPhone 11 Pro | 375 x 812 | 1125 x 2436 | 5.8″ | 3.0 | 458 | 153 | |
| Apple iPhone 11 | 414 x 896 | 828 x 1792 | 6.1″ | 2.0 | 326 | 163 | |
| Apple iPhone XS Max | 414 x 896 | 1242 x 2688 | 6.5″ | 3.0 | 458 | 153 | |
| Apple iPhone XR | 414 x 896 | 828 x 1792 | 6.1″ | 2.0 | 326 | 163 | |
| Apple iPhone X | 375 x 812 | 1125 x 2436 | 5.8″ | 3.0 | 458 | 153 | |
| Apple iPhone 8 | 375 x 667 | 750 x 1334 | 4.7″ | 2.0 | 326 | 163 | |
| Apple iPhone 8 Plus | 414 x 736 | 1080 x 1920 | 5.5″ | 3.0 | 401 | 134 | |
| Apple iPhone 7 | 375 x 667 | 750 x 1334 | 4.7″ | 2.0 | 326 | 163 | |
| Apple iPhone 7 Plus | 414 x 736 | 1080 x 1920 | 5.5″ | 3.0 | 401 | 134 | |
| Apple iPhone 6s Plus | 414 x 736 | 1080 x 1920 | 5.5″ | 3.0 | 401 | 134 | |
| Apple iPhone SE | 320 x 568 | 640 x 1136 | 4.0″ | 2.0 | 326 | 163 | |
| Apple iPhone 6s | 375 x 667 | 750 x 1334 | 4.7″ | 2.0 | 326 | 163 | |
| Apple iPhone 6 | 375 x 667 | 750 x 1334 | 4.7″ | 2.0 | 326 | 163 | |
| Apple iPhone 5s | 320 x 568 | 640 x 1136 | 4.0″ | 2.0 | 326 | 163 | |
| Apple iPhone 5c | 320 x 568 | 640 x 1136 | 4.0″ | 2.0 | 326 | 163 | |
| Apple iPhone 5 | 320 x 568 | 640 x 1136 | 4.0″ | 2.0 | 326 | 163 | |
This website uses cookies, We and our partners use technology such as cookies to analyse our traffic and to show you personalised content and ads. You consent to our cookies by clicking «Agree» or by continuing to use our website.
Источник
