Three elements of mobile web development: screen and web development

Three elements of mobile web development: screen and web development
* Directory [1] screen size [2] resolution [3] Before pixel density

In fact, no one has mentioned the three elements of the screen. It is just a term I have summarized and summarized in the relevant sections of mobile web development screens. The three elements of the screen include screen size, screen resolution, and screen pixel density.

 

Screen Size

We often hear that the screen size of a 5.5 inch-inch mobile phone is actually the diagonal length of the screen. Common screen sizes include 3.5, 4, 4.3, 4.8, 5.0, 5.2, 5.5, 6.0, and.

There is no concept for inches. You can convert them to common centimeters by using the conversion formula.

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 on the screen. Generally, the resolution is indicated by vertical pixels * horizontal pixels. Display common resolutions such as 800*600, 1024*768, 1280*720, 1600*900, 1920*1080, in px

[Note] the pixel-related knowledge step is now

If the retina screen exists, note that the screen resolution refers to the device pixel, not the ideal viewport.

[HD and 4 K]

Currently, the two most popular keywords for mobile devices and Smart TVs are HD and 4 K. Both of them are used to describe the resolution standards of display devices. What is the difference between the two?

HD: there is no fixed standard. Basically, as long as the width is 720px, it is regarded as HD.

Full HD (full HD): 1920*1080 resolution

4 K: 4 K is also called QHD or UHD (ultra-HD). The minimum resolution is 3840*2160, mainly the resolution of high-end TVs. It also has a higher standard of 4096x2160, it is mainly used for movie projectors or professional cameras.

[About camera pixels]

We have heard that cameras support 10 million pixels. The pixel actually refers to the maximum pixel. The pixel is the unit of resolution. This pixel value is only the maximum valid resolution supported by the camera.

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

 

DPI and PPI

DPI (Dots Per Inch) is used in the printing industry to measure the density of spatial points. This value is the number of ink points that the printer can spray Per Inch. The computer display device draws on the DPI concept from the printer. Because the atomic unit in the computer display device is not a ink dot but a pixel, it creates a Pixels Per Inch ), this value is the number of pixels per inch on the Screen, that is, the Screen density ). For various reasons, the Current PPI (mainly iOS) and DPI (for example, in Android) are used in the parameter description of the display device on the computer, but the two mean the same, all indicate the pixel density of the screen.

Screen pixel density (DPI or PPI) = diagonal resolution/screen size

The resolution of the diagonal line is calculated by the hook theorem: √ (1920 + 1080) ≈ 2203

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

DPI = diagonal resolution/screen size

Taking the iPhone 3 S and iPhone 4 as examples, the screen sizes are the same, the screen resolution is doubled, and the screen pixel density is also doubled.

Google officially specified to differentiate dpi of different devices according to the following standards

The distinction between Apple is simpler: non-high-definition screens, high-definition screens, and ultra-high-definition screens

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

From the numerical point of view, the correspondence between Apple and Ann is as follows: