Iosiphone screen size, resolution and adaptation

iosiphone screen Size, resolution and adaptation

1.iPhone Size Specifications

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

2 inch (inch)

1 inch = 2.54cm = 25.4mm

3. iphone phone width

The width height (width/height) in the table above is the physical size of the phone, including the display and border.

The following is the width of the iphone4s:

4. Screen size

What we typically call the IPhone5 screen size is 4 inches and the iPhone6 screen size is 4.7 inches, which refers to the length of the display diagonal (diagonal).

The following is the screen size specification for iphone5~6+:

5. Pixel Density PPI

PPI (Pixel per inch by diagonal): Represents the number of pixels (Pixel) per inch along the diagonal.

Higher PPI values represent the display's ability to display images at a higher density, i.e. the higher the resolution, the weaker the particle sense.

According to the Pythagorean theorem, it can be learned that iPhone4 (s) PPI calculation formula is:

The results are slightly out of the picture because the discrete sampling of pixels has a sawtooth effect.

6. Scaling factor (scale factor between logic point and device pixel) (1) Scale Origin

The screen resolution of the early IPHONE3GS was 320*480 (ppi=163), and the iOS drawing graphics (cgpoint/cgsize/cgrect) were all measured in a point (measured in points):

1 point = 1 pixel(point per inch=pixel per Inch=ppi)

Later, in IPhone4, the same size (3.5 inch) screen uses the Retina display technology, the horizontal and vertical pixel density is magnified to twice times, the pixel resolution is increased to (320x2) x (480x2) = 960x640 (ppi=326), The image resolution is raised to 4 times times the IPHONE3GS (1 point is rendered as a 1 2x2 pixel matrix).

For developers, however, the iOS graphics API continues to follow Point (PT, which differentiates the "points" in the printing industry). In the same logical coordinate system (320X480):

1 point = Scale*pixel(in iphone4~6, scaling factor scale=2; in iphone6+, Scaling factor scale=3).

Can be understood as:

scale= Absolute length ratio ( point/pixel) = number of units in length ( pixel/point)

(2) Uiscreen.scale

This attribute is defined in UIScreen.h :

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

@property (nonatomic,readonly) cgfloat scale Ns_available_ios (4_0);

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

This value reflects the scale factor needed to convert from the default logical coordinate space into the dev Ice coordinate space of this screen.

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

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

To automatically adapt to the resolution, the system automatically assigns a value to the Uiscreen.scale based on the actual resolution of the device, which is read-only to the developer.

(3) Uiscreen.nativescale

IOS8 added the Nativescale property:

Native scale factor of the physical screens

@property (nonatomic,readonly) cgfloat nativescale Ns_available_ios (8_0);

The following is the output under iphone6+, initially it appears that the Nativescale is not much different from scale:

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

(LLDB) p (cgfloat) [[UIScreen mainscreen] scale]
(cgfloat) $ = 3
(LLDB) p (cgfloat) [[UIScreen Mainscreen] Nativescale]
(cgfloat) $ = 3

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

(4) model identification

At the same logical resolution, the scale parameter can be used to identify whether it is IPHONE3GS or iPhone4 (s). The following is a macro that defines whether the probe model is iphone6+ based on the Nativescale parameter:

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

Not Uiuserinterfaceidiompad
#define Is_iphone (ui_user_interface_idiom () = = Uiuserinterfaceidiomphone)
Detect IPhone6 Plus based on it native scale
#define is_iphone_6plus (Is_iphone && [[Uiscreenmainscreen] nativescale] = = 3.0f)

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

So, the same resolution and scale, how to distinguish between the model iPhone4 and 4s, iPhone5 and 5s? by [[Uidevice Currentdevice] model] can only distinguish the iphone, IPad, ipod category, to determine the specific model of the iphone, you need to pass the Sysctlbyname ("Hw.machine") Obtain detailed equipment parameter information to be screened.

7.Resolutions &rendering

8. @2x/@3x and high-power map adaptation (1) @2x

@2x means the same "double" retina resolution that we ' veseen on all iOS devices with retina displays to date, where each V Irtual pointin The user interface is represented by and physical pixels on thedisplay in each dimension, Horizont Al and Vertical.

In the iphone3gs era, we provided an icon for an app (or a button to provide a decal), just icon.png. For the current iphone4~6 Retina display, additional @2x high-resolution versions are required.

For example, in Iphone3gs, scale=1, the icon used is 50x50pixel (logicalimage.size=50x50point); in Iphone4~6, scale=2, you need 100x 100pixel (logical Image.size=50x50point, multiplied by image.scale=dimensions in pixels), and named [email protected].

If your app is compatible with Iphone3gs~iphone6, you'll need to provide a picture of icon.png/[email protected] at two resolutions.

(2) @3x

@3x means a new "triple" Retina resolution, where Eachuser interface point was represented by three display pixels. A single @2x pointis a 2?x?2 square of 4 pixels; A @3x point is a 3?x?3 square of 9 pixels. "

iphone6+ in the actual rendering, downsampling/1.15 (1242x2208->1080x1920), accurately speaking, should be @2.46x. For the convenience of developers, Apple uses @3x material and then zooms to @2.46x.

Reference : Why does the iphone 6 Plus reduce the 2208x1242 resolution of 3x rendering to the 1080p screen? "Detailed iphone 6 Plus's wonderful resolution" "iphone 6 Plus screen resolution"

If your app is compatible with iphone3gs~iphone6+, you'll need to provide a picture of icon.png/[email Protected]/[email protected] three resolutions.

It is important to note that the size and naming of the IOS app icons are subject to relevant specifications.

(3) High power map file name

For IPhone3, 4/5/6, 6+ Three models, you need to provide the corresponding high-power map by resolution and the file name to add the corresponding suffix, otherwise it will stretch (stretchable/resizable) distortion (blur or corner-saw).
The following two classes of initialization APIs based on UIImage the adaptation of high magnification:
<1>+imagenamed: This method uses the system cache, which is suitable for the table view to repeatedly load the image. The API also automatically finds files containing corresponding high-magnification suffix names (@2x) based on the UIScreen scale, if not found, set the default image.scale=1.0. Therefore, using this method, you do not need to specifically specify a high magnification suffix. In practice, if the system finds that the current device is a Retina screen (scale=2), it will automatically look for images in the "*@2x.png" named format and load the image footage for the retina screen, otherwise it will be distorted.
<2>+Imagewithcontentsoffile/+imagewithdata: (scale:)/-initwithcontentsoffile:/-initwithdata:( Scale:)
The UIImage object created by this set of methods does not use the system cache, and the specified file name must contain an explicit high magnification suffix. If the file name contains the @2x suffix, then image.scale=2.0, otherwise the default image.scale=1.0 will be distorted for the retina screen as well.
<3> at present, when the adaptation of iphone6+, in addition to some full-screen large map (Logoicon, launchimage) need to provide three times times, other small graphs can still use the original twice times the image of adaptive stretching.

9. Screen Bounds & application Frame (1) uiscreen.bounds

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

@property (nonatomic,readonly) cgrect bounds;

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

Consider the effect of the turn screen, according to the actual screen orientation (uideviceorientation) of the width of the high

#define screen_width ([uiscreenmainscreen].bounds.size.width)

#define screen_height ([uiscreenmainscreen].bounds.size.height)

#define statusbar_height([uiapplicationsharedapplication].statusbarframe.size.height)

Regardless of the impact of the rotary screen, only the vertical screen (uideviceorientationportrait) of the width of the height

#define screen_width MIN ([Uiscreenmainscreen].bounds.size.width, [Uiscreenmainscreen].bounds.size.height )

#define screen_height MAX ([Uiscreenmainscreen].bounds.size.height, [Uiscreenmainscreen]. Bounds.size.width)

#define statusbar_heightMIN ([Uiapplicationsharedapplication].statusbarframe.size.width, [ Uiapplicationsharedapplication].statusbarframe.size.height)

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

(2) uiscreen.nativebounds

IOS8 new Nativebounds attribute, output vertical pixel level resolution:

The bounding rectangle of the physical screen,measured in pixels. (read-only)
This rectangle was based on the device in a portrait-up orientation. This value does the device rotates.

@property (nonatomic,readonly) cgrect nativebounds Ns_available_ios (8_0);

The following is the output under iphone6+:

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

(LLDB) Ponsstringfromcgrect ([(uiscreen*) [UIScreen mainscreen] bounds])
{{0, 0}, {414, 736}}
(LLDB) Ponsstringfromcgrect ([(uiscreen*) [UIScreen Mainscreen] nativebounds])
{{0, 0}, {1242, 2208}}

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

(3) Uiscreen.applicationframe

Frame of application in points (I.e.entire screen minus status bar if visible)

Bounds removing the system status bar

@property (nonatomic,readonly) cgrect applicationframe;

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

Appframe_width=screen_width

#define appframe_width ([UIScreen mainscreen].applicationframe.size.width)

Appframe_height=screen_height-statusbar_height

Note: When horizontal screen (uideviceorientationlandscape),iOS8 hides the status bar by default , at which point Appframe_height=screen_height

#define appframe_height ([UIScreen mainscreen].applicationframe.size.height)

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

(4) The difference between bounds and frame

Shows the difference between bounds and frame:

Model Size adaptation (screen scale adaption)

When transitioning from Iphone3gs/iphone4 (s) to IPhone5 (s), the logical width is slightly higher, and the old footage and layout can run well by autoresizingflexible simple adaptation, but because the aspect ratio increases, Black and thick edges appear at both ends (typically such as launchimage). From a resolution point of view, in addition to the need to provide a full screen launchimage, the other basic use of twice times (@2x), from the screen size point of view, you need to adjust the vertical layout slightly.

From IPhone5 (s) to IPhone6 (+), as the aspect ratio remains the same, iOS has reduced the sharpness of the icons, pictures, and fonts by zooming in and out. At the same time, the absolute coordinate layout will cause the problem of the left bias on the large screen. From a resolution perspective, IPhone6 follows a twice-fold graph (@2x), but requires a higher three times-fold graph (@3x) for iphone6+, and from a screen-size perspective, the UI element dimensions and layout need to be re-adapted to visually coordinate.

(1) Fit by width

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

IPhone4 (s): Resolution 960*640, Aspect ratio 1.5
IPhone5 (s): Resolution 1136*640, Aspect ratio 1.775
IPhone6: Resolution 1334*750, Aspect ratio 1.779
iphone6+: Resolution 1920*1080, Aspect ratio 1.778
It can be roughly assumed that the aspect ratio of iPhone5 (s), 6 (+) is consistent (16:9), which can be scaled proportionally. Therefore, you can fit by width :
Fitscreenwidth= width* (screen_width/320)
In this way, a total of IPHONE3/4/5, 6, 6+ three sets of width, in IPhone6, 6+ will be scaled horizontally.

(2) Fit by height

At the same width, the screen height of iPhone4 (s) is lower than iPhone5 (s), and if the longitudinal layout is strained, it can be iPhone5 (s) as a benchmark, adapted by height :
fitscreenheight= height* (screen_height/568)
A total of IPHONE3/4, 5, 6, 6+ four sets of height, under the IPHONE3/4 will be scaled down, in the IPhone6, 6+ in proportion to the vertical magnification.

It is important to note the impact of the Iphone/ios on the vertical layout of the double-loop Internet hotspot: iphone as a personal hotspot and there is a connection, the system status bar will be more than one line of hot connection prompt bar "Personal hotspot: * Connection", vertical pressure 20pt,[ The uiapplication sharedapplication].statusbarframe height becomes 40pt, and when all connections are disconnected, the hotspot bar disappears and the vertical height is restored to 20pt. For more information, please refer to the vertical adaptation summary of Iphone/ios to open a personal hotspot.

(3) matching by font

In addition, the iphone's "Settings", "General" "accessibility" can be set to adjust "larger font", the app can also be adapted by font size :
For example, the Adaptation table view (Uitableview:uiscrollview) cannot slide left or right, so the landscape should not exceed screen_width, regardless of the size of the font scale. Note limit the width and spacing of the content area of the control element and set the appropriate linebreakmode. Table views support sliding up and down, so the table row height on the vertical and the content area height can be scaled by font size.

For portrait and non-sliding views, it is best not to scale with the font size when the screen is visible in the viewport, otherwise it may exceed the established width.

11.UI Relative Layout

Considering the diversity of iphone models, it is not possible to make four sets of visual interaction drafts for IPhone4 (s), 5 (s), 6, 6+ four screen sizes, or to make absolute annotations from top to bottom, left to right on a particular model. Instead, focus on the relative position (edgeinsets/frame/center) of the Subview in Superview and the offset between the Siblingview (offset), Try to give a relative layout ratio that fits AutoLayout (ideally only for percentages). If the interaction is absolutely labeled under IPHONE5 (s), the bottom of the screen may be extruded on iPhone4 (s), while on the IPhone6 (+) It may be left or vertically biased.

Based on the spacing (margin/edgeinsets) to the edge of the screen, the developer positions the control at the edge ( nails ) as a reference, and then makes relative calculations based on the size and clearance of the control. Thus, if the nail moves, the adjacent controls will be shifted forward, without cluttering up the local adjustment .

In WWDC2012 iOS6, Apple has proposed the concept of auto layout, which uses constraints to define the position and size of the view to accommodate screens of different sizes and resolutions.

12.DEPRECATED API Adaptation

Finally, in addition to adapting the screen size and resolution, the relevant deprecated API in the iOS SDK needs to be adapted. Typical such as:

(1) Uilinebreakmode->nslinebreakmode
(2) Uitextalignment->nstextalignment
(3) Sizewithfont:->boundingrectwithsize:
(4) Stretchableimagewithleftcapwidth:topcapheight:->resizableimagewithcapinsets:

(5) ...

Iosiphone screen size, resolution and adaptation