26

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.

Leah Denham
  • 271
  • 3
  • 8

1 Answers1

18

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.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Which should mean that for example Google Analytics reports CSS pixels, which are scaled according to the systems current scale factor? For example: A screen resolution of 1440x900 can either be a screen with that physical resolution (1440x900) or 2880x1800 (in case of a 2x retina display) - am I understanding it correctly? – carl-johan.blomqvist Apr 21 '20 at 10:59