iOS adaptation (fonts and controls)

iOS font adaptation

First look at the market iPhone4, 5, 6/6p resolution:

iphone4:

Points: 320x480 PT

Render pixel: 640x960 px

Screen resolution: 640x960 px

Iphone5:

Points: 320x568 PT

Render pixel: 640x1136 px

Screen resolution: 640x1136 px

Iphone6:

Points: 375x667 PT

Render pixel: 750x1334 px

Screen resolution: 750x1134 px

Iphone6plus:

Points: 414x736 PT

Render pixel: 1242x2208 px

Screen resolution: 1920x1080 px

In addition, both the IPhone6 Plus and the IPhone6 have both standard mode and magnification mode rendering resolutions:

IPhone6: Standard mode: 750x1334 px; magnification mode: 640x1136 px

IPhone6 Plus: Standard mode: 1242x2208 px; magnification mode: 1125x2001 px

The magnification mode of the IPhone6 Plus is 1.5 times times the standard mode of the IPhone6.

The above resolution gives a conclusion:

1. IPhone4 and IPhone5 width are the same, the height is different, so 4 and 5 adopt the same set of font specification;

2. The IPhone6 amplification mode is exactly the same as the iPhone5 resolution, so 6 and 5 adopt a set of font specifications;

3. The standard mode of the IPhone6 is 750x1334 px, 1.5 times times magnification is exactly iPhone6 Plus's magnification mode resolution 1125x2001 px, so the IPhone6 Plus font specification equals IPhone6 's overall magnification of 1.5 times times.

Therefore: IPhone4, IPhone5, IPhone6 share a set of font specifications, and IPhone6 Plus in the magnification mode of the font is exactly the iphone6 based on the 1.5 times-fold magnification.

Let's take a look at the usual font size rules for specific fonts on iOS:

1. As a control, the body style uses 34px font size under large font sizes, and the minimum should not be less than 22px.

2. Generally speaking, the difference between font size and line spacing for each file size setting is 2px, generally in order to differentiate between the Open title and the body font size difference at least 4px.

3. The title and body style use the same font size. To separate it from the body area, the heading style uses a medium effect.

Personal Understanding:

Font adaptation, in the 6p below 1.5 times times the font will appear very large, for the magnification mode of the experience is good, but the effect in the standard mode is more refined, so the standard mode of adaptation is best based on the model to adapt, or according to the screen width to adapt, This is a good thing: 5 and 4 are guaranteed to use the same set of font specifications, 6 separate set, 6p is a separate set of font specifications.

iOS control adaptation

Since the resolution of 4, 5, 6, 6plus is not the same, we have to adapt to the following three adaptation rules for multi-screen adaptation:

1. Text-Flow

This form is similar to the word wrapping of the editor in window above-----wide screen text display more, narrow screen text display less. The text is automatically laid out according to the width of the screen.

Controls that display text cannot give a fixed value, and are automatically laid out according to the width of the screen.

2. Elastic controls

Is that the interface element has a constant height in the vertical direction, and when the width changes horizontally, it is adaptive by adjusting the element spacing or the right alignment of the elements.

In a nutshell, the height of the control is constant and the width is adapted to the screen.

3. Equal to zoom

Some of the elements fit into the big screen, the case, on the big screen to do more than magnification, so look more comfortable.

Summary: By the NetEase news app to draw

Headline: The height of the controls on all devices is the same as the font size, which uses the text flex control

Image: This column is scaled to match the width of the screen. The font is also the same as the matching. There is also a text-flow adaptation.

iOS adaptation (fonts and controls)