Physical Pixels vs CSS Pixels vs Device Independent Pixels vs Density Independent Pixels vs PPI

Question

I am learning web development and I am having a hard time determining what is equivalent in all of this.

I know hardware pixels and physical pixels are the smallest unit, and that density independent pixels map to actual hardware pixels via a device pixel ratio and they are used to make the viewing experience more consistent. Does this mean that the device independent pixels I'm seeing are the same thing?

Further, I read that the browser reports viewport width in CSS pixels, are these and DIPs the same thing?

I know that Pixels per inch are literal, they are the number of pixels in an inch, but how do they relate to DIPs? A totally separate measurement? When should I use that instead?

I hope this is an appropriate question, I am having issues mentally linking all of these concepts into one usable map, and didn't find any other question where they are all addressed at once.

Answer 1

I know hardware pixels and physical pixels are the smallest unit, and that density independent pixels map to actual hardware pixels via a device pixel ratio and they are used to make the viewing experience more consistent. Does this mean that the device independent pixels I'm seeing are the same thing?

Further, I read that the browser reports viewport width in CSS pixels, are these and DIPs the same thing?

Yes on both counts. For example, an element with height: 200px; width: 200px is always 200 by 200 in DIPs or CSS pixels, even if the hardware 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 maps to a 1x1 physical pixel in 100%, it will map to a 2x2 physical pixel square.

I know that Pixels per inch are literal, they are the number of pixels in an inch, but how do they relate to DIPs? A totally separate measurement?

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

dpi
Dots per inch.

dpcm
Dots per centimeter.

dppx
Dots per px unit.

The <resolution> unit represents the size of a single "dot" in a graphical representation by indicating how many of these dots fit in a CSS in, cm, or px.

For the purposes of CSS and Media Queries, a single "dot" always corresponds to a single physical pixel, never a DIP or CSS pixel, hence the dppx unit. For example, a scale factor of 200% or device pixel ratio (non-standard) of 2.0 is equivalent to 2 dppx.