CODEWITHSUNDEEP
htmlcss
tonitone120
tonitone120

Reputation: 2290

Clarifying the relation between Device Pixels & CSS pixels

This question presumes: device-pixels are absolute (fixed, not relative to anything).

Following reading this article,

  1. My device (MacBook Pro 2019) has a pixel ratio of 2 (2 device pixels in every CSS pixel when zoom-level 100%; calculated by .devicePixelRatio). At 100% zoom-level, CSS pixels (as measured with .innerWidth) are the same as device pixels (as measured with screen.width & Cmd + Shift + 4 + click). I was expecting CSS pixels to be half the value of device pixels.

  2. Why does MDN say CSS pixel is an absolute value when zooming in actually increases the size of a CSS pixel (by increasing the amount of device pixels it equals to)? Why is this in MDN?

enter image description here

Upvotes: 0

Views: 1294

Answers (1)

Kaiido
Kaiido

Reputation: 136618

In your case the scaling is done at the OS level, so everything will "lie" because your OS is set to lie to every applications, including the browsers.

The window.screen.width value will be the one reported by your OS, but in your system preferences, it says that you want the resolution of your display to be set to half of its real resolution, that's what you'll get.

So even these values are not device pixels, but some kind of CSS pixels (well window.screen.width is really 'CSS pixels', the one from the ScreenShot app isn't).

However, while "lying" about the number of pixels, it correctly exposes the pixel density (number of physical pixel used per px). That's what you'll have in window.devicePixelRatio when the browser doesn't apply any zoom by itself. Unfortunately, we don't know when the browser applies such a zoom, so as web-devs, we can't know the OS pixel density, nor the true resolution of the device.

As for the second point, I will assume you asked why MDN says CSS pixels are absolute rather than relative as written in your question.

This doesn't mean that a CSS pixel will always have the same physical dimension outputted (which is impossible btw, think of a video-projector), it's in contrast with relative lengths like %, em, vw, etc. which are relative to an other length.

CSS pixels are absolute in that they don't rely on any other length, even though the physical output may vary.

Upvotes: 2

Related Questions