Mobile device resolution (finally figuring out why mobile design is always 640px and 750px)

When I started writing the mobile page so far, there have been 2 questions bothering me, I only know the results but don't know why

　　Question 1: Why designers give the design is always 640px or 750px (now generally based on Phone6, to the 750px)

　　Question 2: Why do we get 640px and 750px design, when the code is divided by 2, (such as the design manuscript has an icon width is 40*40, we need to divide by 2, the actual code when the width of 20*20 written)

Before also on the Internet to search some related articles, but most of the more obscure difficult to understand, it is too abstruse. Or maybe I don't have enough brains.

But to be fully understood, there is a lot of knowledge that needs to be stored. Personally feel that there is no need to understand so deeply, the following picture to understand, at least 2 of the above problems will be solved, the basic is enough

　　

　　The key point of this diagram is to understand what PT and PX are and how they relate to one another.

　　PT: Logical pixel or logical resolution

the equivalent of the pixels of each phone we see when we use the browser to simulate the mobile end, such as the wide 375*667 iPhone6 See,

This is a logical pixel, and it can be seen as a unit of length.

　　　　

　　PX: physical pixel or physical resolution, also known as device pixel

　　　　The 750*1334 is a physical pixel, which cannot be viewed as a unit of length, as a point, a pixel.

　　　　

Conclusion: Therelationship between PT and PX is that there are several pixels in the--1pt, and the reader is the ratio between them, that is, PT and PX are 1:2 .

Or take IPhone6 for example, pt wide height is 375*667,px wide is 750*1334,px width is twice times the PT, so the reader relationship here is @2x, that is, twice times

So why should the design 640px and 750px be divided by 2, because the designer gives the 640px and 750px are physical pixels

The pixels we see in the browser when we simulate the mobile side of the debug are logical pixels.

　　　

　　Because I have limited ability, may not be very clear, the following article said can also, interested in small partners can see

　　Add:  https://www.genban.org/teach/teach-11650.html (This is a more detailed and clear explanation of the logical and physical pixels)

　　Note: almost forgot one more question did not say (23333) is that you see iphone6/6splus pt and PX ratio is 1:3

There may be a doubt that the more pixels inside the 1pt is sure the clearer, then why did not see the designers to 1242px design manuscript?

Listen to a big God said is because people with meat eyes can distinguish the maximum resolution is @2x is 750*1334, and @3x has more than the human eye to distinguish the limit of

So it will be found that iphone6/6splus(@3x) is no clearer than iphone6/6s (@2x), equivalent to the same.

　　

Mobile device resolution (finally figuring out why mobile design is always 640px and 750px)