The principle and realization of mobile screen adaptation

Mobile screen is the most direct interaction point between user and App.

At different resolutions, the user has a distinct sense of perception of our app, and the updated iteration of the mainstream resolution is completely independent of the app. This makes it a challenge to keep the App on top of most mainstream phones with a sense of consistency and experience.

Screen size

Strictly speaking, screen size is actually defined by two parts of physical size and display resolution.

And we today on all kinds of mobile phones, Pad equipment said screen size, only refers to the physical size.

If the physical size of a cell phone screen is 5.5 inches, it means the length of the screen diagonal of the phone.

Screen resolution

Screen resolution refers to the precision of the screen image, which is the exact number of pixels that the display can display.

The nominal resolution of a mobile phone is 720 x 1280, which means that the screen is composed of 720 pixel points and is composed of 1280 pixels in portrait orientation.

Because the dots, lines, and polygons on the screen are made up of pixels, the more pixels the screen has, the finer the picture is.

The higher the resolution, the more information is displayed in the unit area, and the more content we can see.

Screen scale

The screen scale is the ratio of the width to the height of the screen, and today more refers to the ratio of resolution, i.e.

Screen scale = screen landscape Resolution/Screen portrait resolution

In addition, there are some relatively common ratios between various devices and platforms, and we recommend that you use the recommended scale when developing the corresponding settings or platform applications.

Using the recommended scale allows users to use our App more comfortably and with a better experience.

Here is a simple table for developers documenting the mainstream display ratios of the four platform products when developing applications using Apicloud technology.

It can be seen that mainstream applications are more recommended 16:9 the screen scale

Dpi

DPI (dots per inch), the number of points per inch, used to measure the accuracy of the printer and mouse.

In general, the PPI is used to represent the accuracy of the screen.

Ppi

The PPI (Pixels per inch), the number of pixels per inch, the higher the PPI of the screen, the closer the distance between each pixel in the screen, the higher the pixel density, so that the screen content looks more delicate and authentic.

When the PPI is more than 300, the screen is considered to reach the retina level, in general, the human eye is more difficult to detect the difference between more than 300 PPI.

Calculation formula:

Take iphone 6 Plus for example, screen resolution x 1920, screen size 5.5 inch

PPI =√ (1920 ^ 2 + 1080 ^ 2)/5.5 = 400.5285 ... ≈400

screen Density ( Density )

The Density is presented by Android 1.6 (Android API level 4) to fit a different size screen, indicating how many display points (logical values) are in each inch, in DPI.

In Android native development, it is common to use units such as dp/dip/sp to define the width and height of a view, text

Theoretically, when Density the value is DPI when the 1px = 1DP , the current screen's Density to be - DPI when the 2px = 1DP

Here is a simple form for developers to record the Density values of several mainstream Android phones.

Zoom ratio ( Scalefactor )

Scalefactor is a standard defined by Apple for the IPhone screen adaptation.

The early IPhone 3GS screen resolution was 480 (PPI = 163), and the IOS drawing (cgpoint/cgsize/cgrect) was measured in points (point) (measured in points):

1 point = 1 pixel

Later in the IPhone 4, the same size (3.5 inch) of the screen using the Retina display technology, the horizontal and vertical pixel density is magnified to twice times, the pixel resolution is increased to (x 2) x (480 x 2) = 640 x 960 (PPI = 326), explicit The image resolution is raised to 4 times times the IPhone 3GS (1 point is rendered as 1 2 x 2 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 (480 x):

1 point = scale x pixel

In iphone 4 ~ 6, scaling factor scale = 2; in iphone 6 Plus, scaling factor scale = 3 can be understood as:

Scale = absolute length ratio (point/pixel) = number of units in length (pixel/point)

• which IPhone 6 Plus of the Scale = 3 just for the convenience of writing, the actual rendering will be IOS system conversion, divided by 1.15 , into 2.608 Times around

Here is a simple form for developers to record the scalefactor values of several major iPhone handsets.

Logical resolution

The logical resolution can also be used as a display resolution in Apicloud applications.

Logical resolution and screen resolution are not the same in today's mainstream devices, the formula is:

Logical Resolution = screen resolution/screen magnification

In the Android system, according to the definition of DP 1DP = 1px, Density is 160, the formula is:

Android screen magnification = density/160

If the screen resolution of IPhone 4 is 640 x 960, the logical resolution is:

640/2 x 960/2 = 480 x

The MI 2 screen resolution is 720 x 1280,density to 320 and the logical resolution is:

720/(320/160) x/(320/160) = x 640

Recommended UI Dimensions

Apicloud the page in the application uses logical resolution to display elements, considering factors such as screen scale and actual conversion difficulty, we recommend that you choose 720 x resolution as the standard UI design.

Standard for scale drawings

• Absolute metering
• The units of the absolute metering class, such as PX units, are given precedence.
• Relative metering
• If the desired layout cannot be achieved using absolute metering values such as PX, consider using REM, percent, and other units
• When selecting percentages as element width and height units, it is recommended to use only 100% instead of a value other than 100%, which is more prone to page warping
• Using 640 x 960 or 720 x 1280 UI design, you should first measure the width or height of the element's px value, and then divide by 2 to get the exact value of the writing style.
• Such as: a button in the 720 x 1280 of the design to occupy a large px width, high px, our style should be specified this button width:80px;height:44px
• Elastic box
• Flexible boxes (flex, box) can be considered when both absolute and relative metering cannot easily achieve the desired layout
• Since both IOS and Android system browsers use the -webkit- Standard, the Flex box style only needs to fit -webkit-
• Box-sizing
• We can also use the style attribute position to implement special layouts, specify elements as Position:relation or position:absolute, combine style attributes box-sizing change box calculations and specify specific padding Value Completion layout

Viewport

Viewport is a solution that Apple has launched to allow more desktop sites to display properly in Safari, and is supported by major browsers.

Use viewport to customize the resolution of the current page in the browser.

and Apicloud application because of the multi-screen adaptation work in the engine layer, such as manually specifying viewport as a specific value, may cause our application page display distortion.

In Apicloud applications, we recommend that you use the following code to set up viewport to ensure that your app displays properly:

<meta name= "viewport" content= "Maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width, initial-scale=1.0 "/>

The principle and realization of mobile screen adaptation