by <meta name= "viewport" content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, User-scalable=no"/> A series of questions raised

Recently in writing a mobile page, initially only know the use of the percentage layout can adapt to multiple terminals, sure enough, I was too young. When the designer threw me a 750px design with a iphone6 pixel reference, because this code <meta name= "viewport" content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, User-scalable=no "/> starts the path of the page layout, but there is an issue where the text font does not match the size of the page icon. Always think that the device-width in Width=device-width is equal to the physical width of the device and can be understood as the device's resolution. But after consulting the information, found above about Device-width view, for PC side, this is right, because the physical width of pc screen is equal to the screen resolution of the computer, also equals our page layout width, one by one. However, for the mobile side, it is not so simple, and then look down.

Let's start with a few concepts that will help you understand the above questions.

physical pixels

Also known as device pixels, the display can be controlled by the smallest display unit, you can understand that the atom is the smallest unit of molecules. In fact, a physical pixel is composed of the device's screen resolution. So the resolution of the device that we normally refer to is the physical pixels of the device.

logical pixels

Also known as device-independent pixels (devices independent pixels), or density-independent pixels
Used for devices independent of the units used to measure pixels logically, that is, CSS pixels, which can be converted to physical pixels.
Therefore, there is a certain correspondence between the physical pixels and the device independent pixels. For example, the resolution of Iphone6 is 750x1334, that is, the physical pixels, but the logical pixels is 375x667, how to, is the device pixel ratio.

Device pixel ratio

The ratio of physical pixels to device independent pixels (device-independent pixels (dips)) on the device. So, Iphone6 's device pixel ratio is 2.

For more information about device pixel ratios, refer to:http://www.zhangxinxu.com/wordpress/?p=2568

So, back to the point, is the designer using a physical pixel or a logical pixel? Answer: physical pixels. What's with the front end? Answer: logical pixels. How to connect the two????? So let's go back to the original code.

<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, User-scalable=no"/>. First understand what viewport is referring to?

In layman's words, the mobile browser takes the area of the Web page, but this area is not limited to the viewable area of the browser. This leads to two concepts: layout viewport and visual viewport. Visual viewport refers to the

The viewable area of the browser, while layout viewport refers to the entire page, usually larger than the visual viewport . can be consulted.

Continue to say,layout viewport General browser will have default value, 980px or 1024px (also may be other values, this is determined by the device itself), this is considered in the PC side of the page can also be displayed, but the actual mobile side of the

Device resolution is smaller than PC side. So Width=device-width 's role is to put layout viewport=visual viewport, the page does not appear scroll bar, and this device-width refers to the device's logical pixels. Than

For example,the resolution of the Iphone6 is 750x1334, which is the physical pixel, but the logical pixel is 375x667, the designer uses the former physical pixels to design the prototype, and the front end uses the post-logical pixel layout. When the front-end is implemented, the layout is usually implemented as a percentage

So do not write dead page entire width, only the page font and small icon, although is designed according to 750, you can consider using REM to achieve, with equal than scaling method to solve.

For further information on viewport, refer to: http://www.cnblogs.com/2050/p/3877280.html

There is also a concept: pixel density (PPI), interested friends can refer to the link: 1190000004383049?_ea=594611,

Http://www.chinaz.com/manage/2015/0902/441624.shtml

The first time to write a blog, may not write well, hope to see the understanding of friends, but also point out the shortcomings of the article. At present the project is also in practice, after the problem summary will not be updated regularly.

by <meta name= "viewport" content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, User-scalable=no"/> A series of questions raised