ViewPort, logic pixel/device independent pixel, physical pixel/device independent pixel, resolution, CSS pixel, device pixel ratio DPR, pixel density ppi.

One. Related basic knowledge

Xiaomi Note Parameter view: http://www.mi.com/minote/specs/

The following is an example of millet note this device.

1. It is generally said that the number of inches of mobile phone refers to: the length of the screen diagonal. 1 inches 2.54 cm. The millet note is 5.7 inches and is about 14.478 cm.

2. Physical pixel/device pixel/pixel: In a very not rigorous way to the popular explanation: This screen is 5 inches, the vertical isometric drawing 1919 lines, so that there will be 1920 columns sideways, the same kind of horizontal painting 1079 lines, vertical see there will be 1080 lines, the process of the horizontal and vertical line will intersect, So a lattice, this lattice is small and small, you can think of this lattice as a physical pixel. It is the unit that describes the resolution size, note Yes, is a unit, and there is no fixed actual physical length, no size.

3. Logic pixel/device independent pixel/device standalone pixel: for example, we have an element is a point, on phone a (assuming that the cell phone a line has 10 pixels) to occupy a pixel, this time to display this point to mobile phone B (assuming that the phone B line has 100 pixels), if we press the physical pixels, Also assign it a pixel, it occupies 1% of the line, and on mobile phone a accounted for one-tenth, you will feel that on the mobile phone B has become very small, if the cell phone B line has 100,000 pixels, you can not see the element, because the invisible. So think of setting up a logical pixel, so from the new words: this element in mobile phone A to occupy a logical pixel, on the phone B also accounted for a logical pixel, but on the phone B on the 10 pixels as a logical pixel, so that the different devices on different screens to show the same effect.

----16-year-old programmer wants to be a painter. jpg

4. Resolution: Again, the resolution of the unit is a pixel (physical pixels), the usual saying that the clear is not clear ah, good HD yo. is to say another measure of resolution: PPI. To see what to describe, such as you say the resolution is 1920*1080 that must be described by the physical pixels, this does not mean that it is not clear, because the screen size is ignored.

5.ppi:①ppi is the pixels per inch abbreviation, the pixel density unit, which represents the number of pixels per inch. The formula is expressed as ppi=√ (x^2+y^2)/z (X: length pixels; Y: width pixels; Z: Screen size)

②, it's a bridge link between the world of pixels and the physical world (you can't determine how big a pixel is), the more pixels in a physical unit, the higher the density, the larger the PPI, the clearer the display.

③ from the formula can be seen, it involves 2 factors, resolution and device size. The smaller the device display, the higher the resolution, and the clearer the moment.

④ in fact, the PPI over a certain extent, we generally have not felt, vision is limited. "When you get something 10-12 inches (about 25-30 centimeters) away from you, the resolution will not be able to distinguish the pixels from the" magic number "of 300ppi (300 pixels per inch), Chocó said. ”

6.CSS Pixels: It's actually a conceptual thing, and device pixels (physical pixels) are not equal. When the page is not scaled, it is equal to the logical pixels (device independent pixels). In fact, the pixel of CSS is like it is a logical pixel, because we design the page, we hope that the PX is the same.

7. Device pixel ratio DPR:DPR = device pixel/device independent pixel = physical pixel/logical pixel. What to say, look at my figure above: 2 screens assume that the logical pixel is 16, and then the device pixel on the left is 16 (4*4), and the device pixel on the right is 64 (8*8), so the left side of the device screen DPR is 1, and the DPR on the right is 4. As long as the logical pixels of the two elements are the same, that element gives us the same visual size in the left and right two devices. Analysis of a wave: 2 elements if the logical pixels are the same size, then the larger the DPR, the larger the device pixels. Think again: When not scaled, dpr= device pixels/css pixels. Think again, a device is produced, its device pixel is fixed, its device independent pixels is also fixed (that is, logically idealized, such as the element on a device it is a logical pixel, on the B device It is also a logical pixel, it will not be affected by the device), then its DPR is also fixed. But we are all based on a device, different devices are not equal to the device pixel is a change.

Two. Viewport

1. The detailed explanation I have gone, I just want to say my understanding.

2.Viewport is viewed from the perspective of the browser, is said to have 3 kinds, Layout viewport,visual viewport,ideal Viewport.

3.Layout Viewport:

PC-side first maximize the browser, mobile phone end, because also can not zoom browser. You can view the corresponding layout Viewport in the browser's console input window.innerwidth. For the latest UC Browser example, the PC side of the Layoutviewport is 1920px (and CSS in the PX and above the logical pixels of a thing), the mobile side of 1572px.

It is a virtual window, because if you put the page directly on the phone, the size is not enough. The logical pixel that the phone corresponds to the webpage, such as the Apple 4 resolution is 960*640px (this is the physical pixel), its logical pixel is 320*480px (this is the logical pixel). In the case of non-scaling CSS, the PX corresponds to the logical pixel, 1:1 relationship. So you think you're a 800px (CSS px here also equals a logical pixel) how wide a Web page might be on a browser with a width of 320px (logical pixels) on an apple 4. does not exist. So, they came up with a way to load this Web page with a virtual Windows layout viewport, which, by default, sets it wide to fit most of the pages. This layout viewport up to a compatible Web page and goes down to the width of the compatible phone (logical pixels). As for how to put the default layout viewport width of 980px area to the exact conversion display on the mobile phone screen, is actually the above the pair of my own drawings. Specific this process I do not say much, online this has explained very detailed.

I would like to say that: For example, the PC side of the UC default viewport (layout viewport) is 1920px (logical pixels, not scaled is the CSS in the PX), when we do not use Mata to set the viewport, How it works to provide users with a better experience on the phone side.

In fact, ①: When the width of the Web page is less than or equal to 1920px, the entire page will be displayed in your browser completely. ② when the width of the Web page is greater than 1920px, because this time the width of the page is greater than the default size of the preset (that is, the layout viewport size), so the current layout viewport can not carry the width of the page, it will appear horizontal scroll bar.

So when you design the site, do not be too big, because you do not use Mata set viewport, your page will appear horizontal scroll bar. But can not be too small, because too small will make the entire page display is very small, content font pictures and so will be very small, very uncomfortable, experience is poor. Even if you do not use the Mata set viewport do not let the phone side browsing uncomfortable too much. But now very few sites do not have this set up, after all, the more friendly and perfect way why not, and not difficult. As to how the width is comfortable, you can check online, referring to other websites.

4.Visual Viewport: This is the viewable area size of a real-time browser, still measured with "window.innerwidth". PC side can adjust the size of the browser, more than a few times, you will find that the browser is the size of the viewable area, is still a logical pixel.

5.Ideal Viewport: This is a dynamic window, and its size is the size of the display width of the device itself (still a logical pixel or the PX that can also be called CSS). It is based on your device, the size of your phone, the resolution, then the size of your ideal viewport is specific.

Summary ha: Layout viewport is the official browser by default, visual viewport is the browser real-time visual area size, Ideal viewport is a specific device's screen width size (all the logic is always said, Typically, a logical pixel can be the same as the PX in the CSS)

6.mata settings Viewport:<meta name= "viewport" content= "width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, User-scalable=no "/>

"Width=device-width" set the layout of the viewport viewport as the width of the device (actually Device-width is ideal viewport), the scale is usually set to 1, is the layout Viewport (default width of the default factory-hosted Web page) is equal to the width of the ideal viewport. This will allow the Web page to fit into your device.

End: I used 2 days, nearly 24 hours, the basic reading Baidu out of the first 3 pages related content, their own thinking, test, write and delete and write, but I know that the language or the fundamental things must not understand. If there are errors or errors, please point out, thank you.

ViewPort, logic pixel/device independent pixel, physical pixel/device independent pixel, resolution, CSS pixel, device pixel ratio DPR, pixel density ppi.