First of all, I would like to talk about the size of the device. Generally, we talk about the number of inches of the mobile phone screen in daily life, which is the size of the device, as shown below:

The size of the device refers to the length of the diagonal line in inches. 1 inch =2.45 cm. Let’s talk about the focus of this time, pixels and viewports.

pixel

In mobile development, we often hear the terms “physical pixel”, “screen resolution”, “pixel density”, “CSS pixel”, “logical pixel”, and “device-independent pixel”.

Physical pixel

The display screen is made up of pixels, which are fixed from the day the screen comes out of the factory by controlling the color of each pixel to make the screen display a different image. These pixels are physical pixels, they’re real.

Screen separation rate

It refers to the number of physical pixels in the horizontal and vertical directions. The screen resolution is usually expressed as vertical pixels x horizontal pixels, for example, 1960×1080, which means 1960 physical pixels in the horizontal direction and 1080 physical pixels in the vertical direction.

Pixel density

Density = quantity/areaCopy the code

Again, pixel density here refers to the number of physical pixels per unit size, ppi. Screen pixel density is related to screen size and screen resolution. The higher the pixel density, the better the display.

Note: we say normally display resolution, actually refers to the resolution of the desktop Settings, rather than the physical display resolution, only in the physical and desktop resolution consistent case, the display effect is best, so now we desktop resolution is almost always consistent with the physical resolution of display.

For us front-end engineers, CSS pixels (logical pixels) are often used too much in development. Now the question is, after all, how do physical pixels and CSS pixels relate to each other? That’s device independent pixels

CSS pixel

The layout of the finished elements is done in the layout viewport. CSS pixels are the units of measurement for layout viewports. Layout viewports determine CSS pixels.

Device independent pixel

Device-independent pixels are key points in the transition between CSS pixels and physical pixels. When width=device-width is set, device-independent pixels are the same as CSS pixels. Because the size of the layout viewport is equal to the device-independent pixels, as shown below:

375 * 667 represents device-independent pixels. Ok, with device-independent pixels, a clear relationship between CSS pixels and physical pixels comes out, device pixel ratio.

Device Pixel Ratio (DPR)

DPR = Physical pixels/device-independent pixelsCopy the code

When width=device-width is set, device-independent pixels are CSS pixels, and CSS pixels are associated with physical pixels. When DPR = 2, one CSS pixel is four physical pixels.

Summary of view, the CSS 1 px 1 px aren’t always equal to the equipment, in the designed for desktop browser page, CSS 1 px tend to be a physical pixel corresponds to a computer screen, so we don’t need to this with care, but on mobile devices, must understand physics and device independent direct relationship to the pixel, pixels pixels than that equipment.

viewport

In the mobile terminal, viewport can be roughly divided into three kinds, respectively layout viewport (Layout viewport), visual viewport (Visual viewport), ideal viewport.

Layout viewport

As the name suggests, it is used to lay out elements and determine where they are placed on the page.

On mobile devices, the default layout viewport is much wider than the width of the mobile screen to accommodate web sites designed for computer browsers; Because the screen on a mobile device is that big, but the layout viewport is much wider than the device, you can only reduce the area of each CSS pixel, which results in the PC page shrinking on mobile. The diagram below:

While layout viewports have greatly facilitated the transition from desktop sites to mobile devices, there are some drawbacks, but we can change the size of layout viewports to achieve the desired effect.

Visual viewport

Users see the site display area, the general visual port and the width of the device. And the number of CSS pixels changes as the user zooms in, in px (CSS pixels); This value is variable (in the case of scaling). What you see is what you get.

Ideal viewport

That is, the width of the layout viewport is equal to the device-independent pixels; With
, the relationship between CSS pixels and physical pixels is ideal, and we can see the layout we want.

Developer and user influence on viewports and pixels

User zoom

When users zoom in, the area of a CSS pixel will become larger, the number of CSS pixels in the visual port will become less, and the size of the visual port will become smaller (you can see less content, so the visual port becomes smaller); However, the size of the layout viewport is constant and will never affect the previous layout.

When the user makes a zoom out operation, as opposed to a zoom out operation, it also does not affect the layout.

System (developer) scaling

When we use initial-scale in the meta tag, the initial-scale value changes the layout viewport and visual viewport sizes, which are scaled up or down by device-independent pixels. So when initial-scale=1.0, the layout viewport size is device-independent pixels, the same effect as width=device-width.

So, when we’re working on a mobile project, we’ll add width=device-width and initial-Scale =1.0 to the mete tag so that we can see what we want.