Those pixels.

1, physical pixels (physical pixel)

A physical pixel is the smallest physical display unit on a display (phone screen), and each device pixel has its own color value and luminance value under the operating system's schedule.

2,dpr

The device pixel ratio (abbreviated DPR) defines the correspondence between the physical pixels and the device's independent pixels, and its value can be obtained by the following formula:

= 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向

In JavaScript, you can window.devicePixelRatio get to the current device by DPR.

In CSS, you can use -webkit-device-pixel-ratio , -webkit-min-device-pixel-ratio and -webkit-max-device-pixel-ratio do media queries, for different DPR devices, do some style adaptation (here only for the WebKit kernel browser and webview).

This parameter actually quantifies the physical resolution and display sharpness of the screen, such as the iphone's DPR 2, which is higher than the average phone.

DPR is the device pixel ratio meaning, dppx is every image has the meaning of moving less points

DPI and screen size (inches) and resolution are related, DPI is the number of dots per inch? 401 = sqrt (1080 * 1080 + 1920 * 1920)/5.5, you don't have to care about it in development. ‘
Write code as long as the attention DPR, the size of the page viewport is the device resolution/DPR, such as the iphone 6p is 1080p, but DPR is 2.46, so the actual page size is 440 * 780 This resolution for Apple device development is absolutely a disaster, Because most of the 1080p devices are DPR 3. 3, device independent pixel

Device-independent pixels (also called density-independent pixels) can be thought of as a point in a computer coordinate system that represents a virtual pixel (such as a CSS pixel) that can be used by a program and then converted from a related system to a physical pixel.

So there's a certain amount of physical pixels and device-independent pixels 对应关系 , which is the next thing to say 设备像素比 .

4,

Those pixels.