Device pixels (also known as physical pixels)

  • By controlling the color of each point, the screen will display a different color;

  • The number of dots on the screen is represented by resolution; The number of dots on a screen is fixed from the moment it leaves the factory;

    For example, huawei Mate40 has a resolution of 2340 x 1080 pixels, so there are 2,566,080 points on the screen

  • Device pixels are real;

  • The units of this point are pt, absolute units; 1pt = 1/72 (inch), inch and inch, and 1 inch is 2.54 cm.

  • Commonly called:

    P: 720 1280 x720

    P: 1080 1920 x1080

    5k: 5120×2880

CSS pixels (also called device independent pixels, logical pixels)

  • Px is the relative unit in the style, the size is not fixed;

    By default, 1px equals 1pt. If we zoom the browser to 200%, 1px equals 2pt

  • This is an abstract concept

The screen size

  • Inch is a unit of length. For example, the screen size of huawei mate40 is 6.5 inches, which refers to the diagonal length, not the screen area

  • 1 inch = 2.54 cm

  • Screen size = screen hypotenuse pixels /PPI

    How to calculate the screen size of iphone13 pro Max? We know that the resolution is 2778 x 1284 and the PPI is 458

    var _px = Math.sqrt(Math.pow(2778.2) + Math.pow(1284.2))
var _inch = _px/458
console.log(_inch) / / 6.682057487022466
Copy the code

Pixel density (PPI)

  • The number of device pixels in an inch area;

  • PPI = Screen hypotenuse pixels/screen size;

  • The higher the PPI, the more pixels the device has on a given screen size; The clearer the screen;

  • How to check PPI

  • PPI is determined by the manufacturer

  • What is HD screen? At the same size, PPI doubles. Apple calls hd retina display

  • An n-fold increase in PPI increases the number of pixel points on the device by n-fold, while reducing the size of pixel points on the device by 1/4

Pixel ratio (DPR)

  • A CSS pixel occupies several device pixels, for example, the icon below occupies several device counts

  • DPR = Physical pixel/CSS pixel

  • Get window.devicePixelRatio, for example: iphoneX has a pixel ratio of 3

conclusion

  • Pixels are divided into device pixels and CSS pixels.

  • Device pixels, which correspond to the resolution in the phone, are fixed as soon as they leave the factory and never change;

  • PPI is determined by the device pixel, PPI = screen hypotenuse pixel/screen size, screen hypotenuse pixel is equal to the screen resolution squared and then root; The larger PPI is, the more pixels the device has and the clearer the image is. If PPI is doubled and the number of pixels on the device is quadrupled, the space occupied by each pixel is compressed to 1/4 of its original size.

  • CSS pixels will change. The relationship between CSS pixels and device pixels is pixel ratio DPR. DPR = physical pixel/CSS pixel. If the pixel ratio is 2, it means that one CSS pixel occupies two device pixels. The meaning of pixel ratio is to make the image normally displayed on the HD screen. For example, sometimes the UI design is a little fuzzy on the mobile phone, so the UI may need to be larger in the design, because the resolution of the mobile phone is getting higher and higher, that is, the device has more and more pixels. The size of the iphone6 may not be clear enough on mainstream phones today.