Mobile Web development--css pixels, device-independent pixels, device-pixel relationships

CSS pixels, device independent pixels, device pixels, the three are closely related and very big difference, and we are mainly in the mobile development needs to use more of these concepts, what are they referring to?

Concept

css pixels (CSS Pixel): For Web programming, referring to the logical pixels we use in style code, is an abstract concept that does not actually exist

device independent Pixel: device-independent logical pixels, which represent virtual pixels that can be programmed for use, are a general concept, including CSS pixels

device Pixel: physical pixels, the device can control the smallest unit of display, we often say the 1920x1080 pixel resolution is the device pixel unit

Relationship

Because device-independent pixels are large classes that contain CSS pixels, we can directly discuss the differences and connections between device-independent pixels and device pixels.

First we can do a general summary:

pc Side --1 devices independent pixels = one device pixel (in 100%, without scaling, if zooming to 200% can say 1 devices independent pixels = 2 device pixels)

Mobile --depending on the device vary greatly, according to the PPI different we can get different conversion relationship, Standard screen (160ppi) under 1 devices independent pixels = one device pixel

Before we elaborate, we introduce two concepts: pixel PPI per inch and device pixel ratio DPR.

PPI (pixel per inch): Indicates the number of pixels per inch, the higher the value, the more dense the screen can display the image.

Calculation Formula--

A cell phone with a PPI of 120-160 is classified as a low-density cell phone, 160-240 is classified as medium density, 240-320 is classified as high density, and more than 320 is classified as ultra-dense (e.g. Apple's Retina display)

DPR (device pixel ratio): equipment pixel ratio, device pixel/device independent pixels, representing the device independent pixel to device pixel conversion relationship, in JS can be obtained by window.devicepixelratio

Calculation Formula--

Knowing the device pixel ratio, we can convert the CSS pixel used in the program to the device pixel, and solve the problem that the same picture shows the difference on different mobile terminals.

Common equipment DPR can be http://screensiz.es/phone or http://devicepixelratio.com/query, we will say the following specific use method.

When the device pixel ratio is 1:1, 1 (1x1) device pixels are used to display 1 css pixels;

When the device pixel ratio is 2:1, 4 (2x2) device pixels are used to display 1 css pixels;

When the device pixel ratio is 3:1, 9 (3x3) device pixels are used to display 1 css pixels.

As shown in the following:

So if we want to display the same picture on a non-standard screen at the same size, we need to scale the size of the image and calculate the formula:

Why is that so? For example, we previously set the image size to 100px in the CSS, to DPR 2:1 (that is, in one Direction 2 device pixel length represents 1 css pixel length) Retia screen on the same scale display, you need to enlarge this image to 2 is the size, that is, 200px, This way, the visual perception of the image on the device is the same as the standard screen.

In the end, we try to use meta-information configuration <meta name= "viewport" width= "Device-width" in the mobile page development, and after adding this code we find that the previously scaled page is magnified.

In fact, it means that the viewport is set to: css pixels = device pixels, that is, we set in the page 1 CSS pixel size is equivalent to 1 device pixel size, on the PC can not see the effect, but in the mobile page development we will see a big difference.

Mobile Web development--css pixels, device-independent pixels, device-pixel relationships