IosiPhone screen size, resolution, and adaptation

IosiPhone screen size, resolution, and adaptation
1. iPhone size

Device IPhone	Width Width	High Height	Diagonal Line Diagonal	Logical resolution (point)	Scale Factor	Device resolution (pixel)	PPI
3GS	2.4 inches (62.1)	4.5 inches (115.5)	3.5-inch	320x480	@ 1x	320x480	163
4 (s)	2.31 inches (58.6)	4.5 inches (115.2)	3.5-inch	320x480	@ 2x	640x960	326
5c	2.33 inches (59.2)	4.90 inches (124.4)	4-inch	320x568	@ 2x	640x1136	326
5 (s)	2.31 inches (58.6)	4.87 inches (123.8)	4-inch	320x568	@ 2x	640x1136	326
6	2.64 inches (67.0)	5.44 inches (138.1)	4.7-inch	375x667	@ 2x	750x1334	326
6 +	3.06 inches (77.8)	6.22 inches (158.1)	5.5-inch	414x736	@ 3x	(1242x2208->) 1080x1920	401

2. Unit: inch ()

1 inch = 2.54 = 25.4

3.IPhone wide and high

Width/height is the physical size of the mobile phone, including the display screen and border.

The width and height of the iPhone 4S are as follows:

4. Screen Size

The screen size of the iPhone 5 is 4 inch, and the screen size of the iPhone 6 is 4.7 inch. It refers to the diagonal length of the display (diagonal ).

IPhone5 ~ 6 + screen size specifications:

5. pixel density PPI

PPI (Pixel Per Inch by diagonal): indicates the number of pixels Per Inch along the diagonal line.

The higher the PPI value, the higher the resolution and the weaker the particle sensation.

 

The formula for calculating the PPI of iPhone 4 (s) is as follows:

The calculation result is slightly different because discrete pixel sampling has a sawtooth effect.

6. Scaling Factor(Scale factorBetween logic point and device pixel) (1) Origin of Scale

The screen resolution of early iPhone3GS was 320*480 (PPI = 163), while that of iOS graphics (CGPoint/CGSize/CGRect) were measured in point (measured in points ):

1 point = 1 pixel(Point Per Inch = Pixel Per Inch = PPI)

Later, in iPhone 4, the screen of the same size (3.5 inch) used the Retina display technology, and the pixel density in both the horizontal and vertical directions was doubled, pixel resolution increased to (320x2) x (480x2) = 960x640 (PPI = 326 ), the resolution of the image is increased to 4 times that of the iPhone 3gs (one Point is rendered into a 2x2 pixel matrix ).

However, for developers, the iOS graphics rendering API still follows the point (pt, note that the printing industry's "lbs") unit. In the same logical coordinate system (320x480 ):

1 point = scale * pixel(In iPhone 4 ~ In 6, the scaling factor scale = 2; in iPhone 6 +, the scaling factor scale = 3 ).

It can be understood:

Scale =Absolute length ratio(Point/pixel) =Unit length(Pixel/point)

 

(2) UIScreen. scale

UIScreen. hThis attribute is defined in:

// The natural scale factor associated with the screen. (read-only)

@ Property (nonatomic, readonly) CGFloatScaleNS_AVAILABLE_IOS (4_0 );

--------------------------------------------------------------------------------

This value reflects the scale factor needed to convert from the defaultLogical coordinate spaceIntoDevice coordinate spaceOf this screen.

The default logical coordinate space is measured usingPoints. For standard-resolution displays, the scale factor is 1.0 and one point equals one pixel. For Retina displays, the scale factor is 2.0 and one point is represented by four pixels.

--------------------------------------------------------------------------------

To automatically adapt to the resolution, the system automatically assigns a value to UIScreen. scale based on the actual resolution of the device. This attribute is read-only to developers.

(3) UIScreen. nativeScale

The nativeScale attribute is added to iOS8:

// Native scale factor of the physical screen

@ Property (nonatomic, readonly) CGFloatNativeScaleNS_AVAILABLE_IOS (8_0 );

Below is the output under iPhone 6 +. It seems that nativeScale is not much different from scale:

--------------------------------------------------------------------------------

(Lldb) p (CGFloat) [[UIScreen mainScreen] scale]
(CGFloat) $1 = 3
(Lldb) p (CGFloat) [[UIScreen mainScreen] nativeScale]
(CGFloat) $2 = 3

--------------------------------------------------------------------------------

(4) Model Identification

In the same logical resolution, you can use the scale parameter to identify whether it is iPhone3GS or iPhone4 (s ). The following nativeScale parameter defines whether the probe model is an iPhone 6 + macro:

--------------------------------------------------------------------------------

// Not UIUserInterfaceIdiomPad
# DefineIS_IPHONE(UI_USER_INTERFACE_IDIOM () = UIUserInterfaceIdiomPhone)
// Detect iPhone6 Plus based on its native scale
# DefineIS_IPHONE_6PLUS(IS_IPHONE & [[UIScreenmainScreen] nativeScale] = 3.0f)

--------------------------------------------------------------------------------

So, how can we distinguish between iPhone 4 and iPhone 4, iPhone 5 and 5s in the same resolution and scale? [[UIDevice currentDevice] model] can only be used to identify iPhone, iPad, and iPod types. To determine the model of an iPhone, you must use sysctlbyname ("hw. machine ") obtain detailed device parameter information for identification.

7. Resolutions & Rendering

8.@ 2x/@ 3x and high-speed graph adaptation (1) @ 2x

@ 2xMeans the same "double" retina resolution that we 'veseen on all iOS devices with retina displays to date, where each virtual pointin the user interface is represented by two physical pixels on thedisplayIn each dimension, Horizontal and vertical.

In the iPhone sera, we only need icon.png for an app logo (or click here to paste images. For the current iPhone 4 ~ 6. For the Retina display, an additional @ 2x high-resolution version is required.

For example, in iPhone 3gs, scale = 1 and the icon is 50x50 pixel (logicalimage. size = 50x50point); In iPhone 4 ~ In 6, scale = 2, 100x100 pixel (logical image. size = 50x50point, multiplied by image. scale = dimensions in pixelssions, And the name is icon@2x.png.

If the APP must be compatible with the iPhone 3gs at the same time ~ IPhone 6, then there are two resolutions of icon.png/icon@2x.png pictures.

(2) @ 3x

@ 3xMeans a new "triple" retina resolution, where eachuser interface point is represented by three display pixels. A single @ 2x pointis a 2? ×? 2 square of 4 pixels; an @ 3x point is a 3? ×? 3 square of 9 pixels ."

During actual rendering of iPhone 6 +, downsampling/1.15 (1242x2208->1080x1920) To be accurate, it should be @ 2.46x. For the convenience of developers, Apple uses @ 3x material and then compresses it to @ 2.46x.

Reference: Why does iPhone 6 Plus need to reduce the 3x rendered 2208x1242 resolution to a 1080p screen? Details about the amazing resolution of iPhone 6 Plus, iPhone 6 Plus screen resolution

If the APP must be compatible with the iPhone 3gs at the same time ~ IPhone 6 then there are three resolutions for icon.png/icon@2x.png/icon@3x.png.

Note that the size and name of iOS APP icons must comply with relevant specifications.

(3) Name the image file

For iPhone 3, 4/5, 6, and 6 + models, you need to provide the corresponding height chart by resolution and add the corresponding suffix to the file name, otherwise it will stretch (stretchable/resizable) distorted (blurred or corner-shaped ).
The following two types of initialization APIs Based on UIImage:
<1> +ImageNamed: This method uses system cache, which is suitable for repeated image loading in table views. At the same time, based on the UIScreen scale, the API automatically finds the file containing the corresponding high-speed image suffix (@ 2x). If the default image. scale = 1.0 is not found. Therefore, you do not need to specify the suffix of a high image. During actual operation, if the current device is Retina screen (scale = 2), the system will automatically search for images named "* @2x.png" and load the image clips for the Retina screen, otherwise it will be distorted.
<2> +ImageWithContentsOfFile/+ imageWithData :( scale :)/-initWithContentsOfFile:/-initWithData:( Scale :)
The UIImage object created in this method does not use the system cache, and the specified file name must contain a clear high-speed image suffix. If the file name contains the suffix @ 2x, the image. scale = 2.0; otherwise, the default image. scale = 1.0 will also be distorted for the Retina screen.
<3> currently, only full-screen big charts (LogoIcon and LaunchImage) that are compatible with iPhone 6 + need to provide three times of images, and other small images can still be automatically stretched based on the original double plot.

9.Screen Bounds&Application Frame (1) UIScreen. bounds

// Bounds of entire screen in points (local coordinate system, starting from [0, 0])

@ Property (nonatomic, readonly) CGRectBounds;

--------------------------------------------------------------------------------

// Consider the impact of screen conversion, according to the actual screen direction (UIDeviceOrientation) width and height

# DefineSCREEN_WIDTH([UIScreenmainScreen]. bounds. size. width)

# DefineSCREEN_HEIGHT([UIScreenmainScreen]. bounds. size. height)

# DefineSTATUSBAR_HEIGHT([UIApplicationsharedApplication]. statusBarFrame. size. height)

// The width and height of the portrait screen (UIDeviceOrientationPortrait) are not considered.

# DefineSCREEN_WIDTHMIN ([UIScreenmainScreen]. bounds. size. width, [UIScreenmainScreen]. bounds. size. height)

# DefineSCREEN_HEIGHTMAX ([UIScreenmainScreen]. bounds. size. height, [UIScreenmainScreen]. bounds. size. width)

# DefineSTATUSBAR_HEIGHTMIN ([UIApplicationsharedApplication]. statusBarFrame. size. width, [UIApplicationsharedApplication]. statusBarFrame. size. height)

--------------------------------------------------------------------------------

(2) UIScreen. nativeBounds

IOS8 adds the nativeBounds attribute to output the pixel-level resolution of the portrait screen:

// The bounding rectangle of the physical screen, measured inPixels. (Read-only)
// This rectangle is based on the device in a portrait-up orientation. This value does not change as the device rotates.

@ Property (nonatomic, readonly) CGRectNativeBoundsNS_AVAILABLE_IOS (8_0 );

Below is the output of iPhone 6 +:

--------------------------------------------------------------------------------

(Lldb) poNSStringFromCGRect ([(UIScreen *) [UIScreen mainScreen] bounds])
{0, 0 },{ 414,736 }}
(Lldb) poNSStringFromCGRect ([(UIScreen *) [UIScreen mainScreen] nativeBounds])
{0, 0}, {1242,220 8 }}

--------------------------------------------------------------------------------

(3) UIScreen. applicationFrame

// Frame of application screen area in points (I. e. entire screenMinusStatus bar if visible)

// Remove the system status bar from bounds

@ Property (nonatomic, readonly) CGRectApplicationFrame;

--------------------------------------------------------------------------------

// APPFRAME_WIDTH = SCREEN_WIDTH

# DefineAPPFRAME_WIDTH ([UIScreen mainScreen]. applicationFrame. size. width)

// APPFRAME_HEIGHT = SCREEN_HEIGHT-STATUSBAR_HEIGHT

// Note: When UIDeviceOrientationLandscape is enabled,IOS8 hides the status bar by default.APPFRAME_HEIGHT = SCREEN_HEIGHT

# DefineAPPFRAME_HEIGHT([UIScreen mainScreen]. applicationFrame. size. height)

--------------------------------------------------------------------------------

(4) bounds and frame

Demonstrate the differences between bounds and frame:

 

10.Model size adaptation(Screen Scale Adaption)

When the transition from the iPhone 3gs/iPhone 4 (s) to the iPhone 5 (s), the width of the logic is slightly higher, and the previous materials and layout can run well with the simple adaptation of AutoresizingFlexible, however, as the aspect ratio increases, black and rough edges (such as LaunchImage) appear on both the upper and lower ends ). From the resolution point of view, in addition to the LaunchImage full screen image, the other basically follows the double plot (@ 2x); from the screen size point of view, you need to slightly adjust the vertical layout.

 

From iPhone 5 (s) to iPhone 6 (+), because the aspect ratio remains unchanged, iOS performs proportional amplification on icons, images, and fonts to adapt to lower definition. At the same time, the absolute coordinate layout will lead to the problem of the left-to-left on the screen. From the perspective of resolution, iPhone 6 follows a 2x diagram (@ 2x), but it needs to provide a higher 3x diagram (@ 3x) for iPhone 6 +. From the perspective of screen size, you need to re-adapt the UI element size and layout for visual coordination.

(1) adaptation by width

Let's take a look at the iPhone 4 ~ 6 (+) screen aspect ratio:

IPhone 4 (s): resolution 960*640, Aspect Ratio1.5
IPhone 5 (s): Resolution 1136*640, Aspect Ratio1.775
IPhone 6: Resolution 1334*750, Aspect Ratio1.779
IPhone 6 +: resolution 1920*1080, Aspect Ratio1.778
We can roughly think that the aspect ratio of iPhone 5 (s) and 6 (+) is the same (), that is, proportional scaling is allowed. ThereforeFit by width:
FitScreenWidth = width * (SCREEN_WIDTH/320)
In this way, there are a total of iPhone 3/4/5, 6, 6 + three groups of width, in iPhone6, 6 + under the scale horizontal amplification.

(2) adaptive to height

In the same width, the screen height of iPhone 4 (s) is lower than that of iPhone 5 (s). If the vertical layout is tight, iPhone 5 (s) can be used as the benchmark,Fit by height:
FitScreenHeight = height * (SCREEN_HEIGHT/568)
There are a total of iPhone 3/4, 5, 6, 6 + four groups of height, in iPhone 3/4 will be scaled down in proportion to vertical, in iPhone 6, 6 + will be scaled up in proportion to vertical.

Attention should be paid to the influence of the Hotspot bar of iPhone/iOS Dual-ring Internet access on the vertical layout: When the iPhone is a Personal Hotspot and there is a connection, there will be a line of Hotspot connection prompt bar "Personal Hotspot: * Connection ", the vertical pressure will be 20 PT, [UIApplication sharedApplication]. the statusBarFrame height is changed to 40pt. When all connections are disconnected, the hotspot bar disappears and the vertical height returns to 20pt. For more information, see the iPhone/iOS topic vertical adaptation summary.

(3) font-based adaptation

In addition, the [general] [Auxiliary Function] of the iPhone can be set to adjust the [larger font], or the APP canFit by font size:
For example, a table view (UITableView: UIScrollView) cannot slide left or right. Therefore, no matter how large the font size scales, the horizontal direction should not exceed SCREEN_WIDTH. Specify the area width and spacing of the control element content, and set the appropriate LineBreakMode. The table view supports sliding up and down. Therefore, you can scale the Row Height and content area height of the table vertically according to the font size.

For a portrait view that does not support sliding, it is best not to scale with the font size when the screen is visible in the area of view, otherwise it may exceed the specified width and height.

11. Relative UI Layout

Considering the diversity of iPhone models, it is impossible to produce four sets of visual interaction drafts for iPhone 4 (s), 5 (s), 6, and 6 + screen sizes, do not add absolute labels from top to bottom and from left to right based on a certain model, but pay attention to the relative position (EdgeInsets/Frame/Center) of the subView in superView) and the Offset between the siblingView, give the relative layout ratio suitable for Autolayout as much as possible (ideally, only the percentage is given ). If the interaction is absolutely marked under the iPhone 5 (s), the screen bottom may be squeezed out on the iPhone 4 (s), while the iPhone 6 (+) may be horizontally or vertically.

 

Based on the Margin (Margin/EdgeInsets (Dingtalk) As a reference, and then calculate the relative Layout Based on the widget size and gap.In this way, if the nail moves, the adjacent controls will be shifted in a forward direction, and will not be messy due to local adjustment..

Apple has proposed the concept of Auto Layout in WWDC2012 iOS6, that is, using constraints to define the position and size of the view to adapt to screens of different sizes and resolutions.

12. deprecated api adaptation

Finally, in addition to screen size and resolution adaptation, you also need to adapt the related deprecated api in iOS SDK. Typical examples:

(1) UILineBreakMode-> NSLineBreakMode
(2) UITextAlignment-> NSTextAlignment
(3) sizeWithFont:-> boundingRectWithSize:
(4) stretchableImageWithLeftCapWidth: topCapHeight:-> resizableImageWithCapInsets:

(5 )...