Physical pixels versus CSS pixels versus device independent pixels and pixel density independent versus PPI

Question

I am studying web development and it is difficult for me to determine what is equivalent in all of this.

I know that hardware pixels and physical pixels are the smallest unit, and density-independent pixels are mapped to actual hardware pixels through the pixel ratio of the device, and they are used to make viewing more consistent. Does this mean that the device-independent pixels that I see are the same thing?

Next, I read that the browser reports the width of the viewport in CSS pixels, are they and DIP the same?

I know that pixels per inch are literal, this is the number of pixels per inch, but how do they relate to DIP? A completely separate measurement? When should I use this instead?

I hope this is a suitable question, I have questions that mentally connect all these concepts with one useful map, and have not found another question on which they are all immediately considered.

Answer 1

I know that hardware pixels and physical pixels are the smallest unit, and density-independent pixels are mapped to actual hardware pixels through the pixel ratio of the device, and they are used to make viewing more consistent. Does this mean that the device-independent pixels that I see are the same thing?

Next, I read that the browser reports the width of the viewport in CSS pixels, are they and DIP the same?

Yes on both counts. For example, an element with height: 200px; width: 200px height: 200px; width: 200px always height: 200px; width: 200px in DIP or CSS pixels, even if the equipment is configured to display at a higher or lower resolution than usual. At a scale factor of 200%, if a 1x1 DIP or CSS pixel displays a physical 1x1 pixel at 100%, it will be displayed per square 2x2 square.

I know that pixels per inch are literal, this is the number of pixels per inch, but how do they relate to DIP? Completely separate measurement?

CSS does not use PPI; It uses only DPI. Section 6.4 of css-values-3 lists the following units:

inch
Dpi

Wild
Dots per centimeter.

dppx
Dots per pixel.

The <resolution> unit represents the size of one “dot” in a graphical representation, indicating how many of these points fit in CSS in, cm or px.

For CSS and Media Queries purposes, one “dot” always corresponds to one physical pixel, never a DIP or CSS pixel, hence a dppx block. For example, a zoom factor of 200% or a pixel coefficient of a device (non-standard) 2.0 is equivalent to 2 dppx.