A shallow analysis of the iphone's PT, Android DP, HTML css pixels and DPR, design dimensions, and physical pixels

Recently asked by a friend: CSS set a DOM height:65px, is the height of the display and Android 65DP elements such as high? The brain flashed a bunch of concepts, such as DPR,PPI,DP,PT, but thought for a while, paste, so re-combed the relevant knowledge, in case of a rainy day.

1.ppi

The PPI refers to pixels per inch, which is the pixel point of the pixel, where the pixels are the physical pixels (i.e. the smallest display unit). The PPI describes the pixel density, which satisfies the following formula

This figure is from UXABC (https://medium.com/uxabc/understanding-ui-units-8acdc0575388)

2.iPhone PT vs. Android DP

The pixel density of the first-generation iphone was 163ppi, but by the time the pixel density was 326ppi in iPhone4, developers found that the 1px display sizes in the first generation of 1px and iphone4 were not equal, and would undoubtedly increase the workload of adaptation, So the iphone developer proposed a PT concept, that is, the first generation of iphone1 pixels of the size as a benchmark, recorded as 1pt (point), that is 1pt under the iphone4 size =2px the width of the height.

Also Android developers have encountered the same problem, Google proposed solution is DP (Density-independent Pixels), the benchmark is 160ppi 1px represents the size;

In summary, PT and DP play the same role as the basic unit of design and display, avoiding the use of PX to trigger an adaptation problem.

3.pt, the relationship between DP and PX

According to the above description, we can know iphone4 under 1pt=2px, because iphone4 is 326ppi, just twice times the benchmark, but iphone6+ is 401ppi, then 1pt in iphone6+ is equal to how many px it? Most developers know it's 3px, but why? I found a comparative image of:

As shown in the figure, the design drawings are designed according to PT, the standard of the design is: x1,x2 and X3, that is, the design of the pixel is 320x480,750x114,1242x2208, but due to the technical reasons, iphone6+ The physical pixels (resolution) do not reach 1242x2208, so only one sample processing (not scaling, because the display size does not change, or 5.5 inch), the display may be less than the actual design diagram, but the resolution itself is very high.

CSS pixels and DPR in 4.HTML

In the HTML have to mention viewport, often set viewport width=device-width, then this device-width value is how much?

<meta name= "viewport" content= "Width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

We will find that under Iphone5 Device-width=320,iphone6 under 375,iphone6+ is 414, that is to say device-width is actually na development in the screen width of how many pt and DP.

Device-width is also interpreted in HTML as the width of the ideal (datum) viewport, which is 320px,375px,414px, where px refers to CSS pixels, often referred to as logical pixels We can assume that CSS pixels in HTML should be displayed in the same size as the PT and DP in NA.

DPR, also become the device pixel ratio, that is, the physical pixel and the logical pixel ratio, it is not difficult to understand: Iphone6 under dpr=2,iphone6+ dpr=3 ( Considering the grid when the pixel, not the real physical pixels );

After the introduction of the above concept, we can ask the beginning of the question, CSS set a DOM height:65px, the height of the display should be and Android 65DP elements such as high.

These are basic concepts and do not introduce how to adapt to the front-end development process, and intend to introduce the next document.

A shallow analysis of the iphone's PT, Android DP, HTML css pixels and DPR, design dimensions, and physical pixels