Three elements of the mobile Web development screen

xTable of Contents [1] screen size [2] resolution [3] pixel density in front of the words

In fact, no one has ever mentioned that the word "three elements" of the screen is the term that I summarize in the relevant sections of the mobile Web development screen. Three elements of the screen include screen size, screen resolution, and screen pixel density.

Screen size

We often hear about a 5.5-inch big screen phone, in fact the screen size refers to the diagonal length of the screen. Common screen sizes are 3.5, 4, 4.3, 4.8, 5.0, 5.2, 5.5, 6.0, etc.

For inches There is no concept that can be converted into a common centimeter by converting formulas

1 inch = 2.54 cm

3.5in = 3.5*2.54cm = 8.89cm4.0in = 4.0*2.54cm = 10.16cm4.3in = 4.3*2.54cm = 10.922cm4.8in = 4.8*2.54cm = 12.192cm5.0in = 5 .0*2.54cm = 12.7cm5.2in = 5.2*2.54cm = 13.208cm5.5in = 5.5*2.54cm = 13.97cm6.0in = 6.0*2.54cm = 15.24cm

Screen resolution

Screen resolution refers to the number of pixels in the screen, which is generally expressed in portrait pixels * transverse pixels. Display common resolutions such as 800*600, 1024x768, 1280*720, 1600*900, 1920*1080, the unit is PX

[note] The relevant knowledge about pixels.

If you have retina retina screens, be aware of the difference between the unit PX and PT. If the screen is a normal screen, then 1px = 1pt, equivalent to unit-independent

such as the iphone6 screen size is 375pt*667pt,dpr=2, so convert to PX, screen resolution of 750PX*1334PX

"HD and 4K"

Now mobile devices, smart TV advertising the most two keywords estimated is HD, 4K, both are used to describe the display device resolution standards, in the end what is the difference between the two?

HD: There is no fixed standard, basically as long as the width of 720px is considered to be HD

Full HD (All HD): 1920*1080 resolution

4K:4K is also called qHD or UHD (Ultra HD), the minimum resolution is 3840*2160, mainly the resolution of the high-end TV, and there is a higher 4096x2160 standard, mainly used for kinetoscope or professional cameras.

"About camera pixels"

We have often heard that the camera supports 10 million megapixels. The pixel that the camera says is actually the maximum pixel meaning, the pixel is the unit of resolution, this pixel value is only the effective maximum resolution supported by the camera.

640*480 = 307200 = 300,000 pixels 1600*1200 = 1920000 = 2 million pixels 3264*2488 = 8120832 = 8 million pixels 4536*3024 = 13716864 = 14 million pixels

DPI and PPI

DPI (Dots per inch) is used in the printing industry to measure space point density, which is the number of ink points the printer can spray per inch. The computer display device draws on the concept of DPI from the printer, since the atomic unit in the computer display device is not ink point but pixels, so it creates the PPI (Pixels per inch), which is the number of pixels on the screen, that is, the pixel density (density). For various reasons, the current PPI (mainly iOS) and dpi (for example, in Android) are used in the parameter description of the computer display device, but both mean the same, representing the screen pixel density.

　　Screen pixel density (dpi or ppi) = diagonal Resolution/Screen size

The Pythagorean theorem calculates the diagonal resolution: √ (1920²+1080²) ≈2203

Diagonal resolution divided by screen size: 2203/5≈440dpi

DPI = Diagonal Resolution/Screen size

Take Iphone3s and iphone4 as an example, the screen size is the same, screen resolution is one-fold, screen pixel density is also one-fold difference

Google's official designation distinguishes the DPI of different devices according to the following criteria

Apple's distinction is simpler: non-HD screen, Gaoqing, Ultra HD screen

1242*0.87=1080 2208*0.87=1920 3*0.87=2.61

From a numerical perspective, Apple and Android have this correspondence.

Three elements of the mobile Web development screen