This is the 23rd day of my participation in the August More Text Challenge.More challenges in August

Related articles:

  • 1. Understand CSS thoroughly
  • 2. Understand CSS thoroughly
  • 1. Understand CSS thoroughly
  • 1. Understand CSS thoroughly
  • 1. Understand CSS thoroughly

What are the differences between device pixels, CSS pixels, device independent pixels, DPR, ppi?

The background,

In CSS, we usually use PX as the unit. In PC browser, each pixel of CSS is a physical pixel corresponding to the computer screen

This creates the illusion that the pixels in the CSS are the physical pixels of the device

However, this is not the case. A CSS pixel is an abstract unit, and the 1px in the CSS represents different physical pixels on different devices or in different environments

When we do mobile development, the same 1px setting will look very different on different mobile devices

Behind this comes the concepts of CSS pixels, device pixels, device independent pixels, DPR, ppi

Second, the introduction

CSS pixel

CSS pixel (CSS Pixel, PX) : Suitable for web programming, the CSS suffix px is a unit of length

In the CSS specification, there are two types of units of length, absolute and relative

Px is a unit relative to the device pixel.

Typically, the page scaling ratio is 1. 1 CSS pixel equals 1 device-independent pixel

CSS pixels are relative in two ways:

  • On the same device, each CSS pixel represents a device pixel that can be changed (such as adjusting the screen resolution)
  • The device pixel represented by each CSS pixel can vary between devices (e.g., two different phone models)

Zooming in and out of the page will also cause a change in the PX in the CSS. If the page is doubled in size, what was originally 1px becomes 2px, and the actual width stays the same, 1px becomes the same as the original 2px (elements will take up more device pixels).

Suppose that what used to take 320px to fill now takes 160px

Px can be affected by the following factors:

  • Pixels per inch (PPI)
  • Device Pixel ratio (DPR)

Question to consider: Have you ever encountered the problem that the 1px line on the mobile terminal is too thick? How to solve it?

Equipment pixel

Device Pixels, also known as physical pixels

The smallest physical unit that the device can control the display. It is not necessarily a small square block, nor does it have a standard width and height, but is simply a “dot” used to display rich colors

One lantern (physical pixel) is composed of red, blue and green lights, and three small lights mix different colors with different brightness

From the day a screen is manufactured in a factory, the device pixels on it are fixed in pt

Device independent pixel

Device Independent Pixel: Device-independent logical pixels that represent virtual pixels that can be used programmatically. It is a general concept that includes CSS pixels

This can be viewed in javaScript with window.screen.width/window.screen.height

For example, we might say “the computer screen is not good for playing games at 2560×1600 resolution, so let’s set it to 1440×900”, where “resolution” (loosely speaking) means device-specific pixels

A device may contain one or more physical pixels in individual pixels, and the more pixels there are, the clearer the screen looks

Here’s an example of why the concept of a virtual pixel unit, device-independent pixels, emerged:

The iPhone 3GS and iPhone 4/4S both measure 3.5 inches, but the iPhone 3GS has a 320×480 resolution and the iPhone 4/4S has a 640×960 resolution

That means the iPhone 3GS has 320 physical pixels and the iPhone 4/4S has 640 physical pixels

If we lay it out with real physical pixels, say 320 physical pixels, the phone with 640 physical pixels will be half empty. To avoid this problem, virtual pixel units are created

We agree that the iPhone 3GS and iPhone 4/4S both have 320 virtual pixels, except that on the iPhone 3GS, one virtual pixel ends up being one physical pixel, and on the iPhone 4S, one virtual pixel ends up being two physical pixels

One virtual pixel is converted into several physical pixels, which we call the device pixel ratio, or DPR, as described below

dpr

Device PixelRatio (DPR), which represents the conversion relationship between device independent pixels and device pixels, can be obtained from window.devicePixelRatio in JavaScript

The calculation formula is as follows:

When the device pixel ratio is 1:1, use 1 (1 x 1) device pixels to display one CSS pixel

When the device pixel ratio is 2:1, use 4 (2 x 2) device pixels to display one CSS pixel

When the device pixel ratio is 3:1, use 9 (3 x 3) device pixels to display 1 CSS pixel

As shown below:

When the DPR is 3, a 1px CSS pixel width corresponds to a 3px physical pixel width and a 1px CSS pixel height corresponds to a 3px physical pixel height

ppi

Ppi (Pixel per inch) refers to the number of pixels per inch, or more accurately, pixel density. The higher the value, the higher the density of the screen

The calculation formula is as follows:

Third, summary

Without scaling, one CSS pixel equals one device-independent pixel

Device pixels do not change after they are produced by the screen, whereas device-independent pixels are virtual units that change

PC side, 1 device-independent pixel = 1 device pixel (at 100%, unscaled)

On mobile, one device-independent pixel at a standard screen (160ppi) = one device pixel

Device Pixel ratio (DPR) = device pixel/device independent pixel

Pixels per inch (PPI), the higher the value, the sharper the image