Why is my display resolution different from screen.width * devicePixelRatio?

Question

On the MDN documentation on devicePixelRatio it says:

(devicePixelRatio) tells the browser how many of the screen's actual pixels should be used to draw a single CSS pixel.

... so I would expect that my display horizontal resolution would be:

window.devicePixelRatio * window.screen.width = 2 * 1792 = 3584

... but no. My display horizontal resolution is 3072.

Why is that?

Answer 1

It seems to me that the specification is not accurate enough here.

(devicePixelRatio) tells the browser how many of the screen's actual pixels should be used to draw a single CSS pixel.

It's should be something like:

(devicePixelRatio) tells the browser how many of the screen's actual CSS pixels should be used to draw a single CSS pixel.

Because those "actual pixels" are not actually actual. No pun intended.

I found this excellent answer to a similar question, but I don't like the “you don't need it” rhetoric. TL;DR - The browser does this mainly for legacy reasons.

Also, I found a huge topic on w3c github about "Ability to address actual physical size", in CSS, but anyway. And there are so many "meh, it's not that simple... you know..." messages. I like this one: "there is no clear concept of what a px is".

Turns out that actually you can get the real aspect ratio. At least it works for me. I have a MacBook with a 15-inch display. The real resolution is 2880x1800 . In the settings, I have a resolution 1680x1050 (on which window.screen is relying). And a real aspect ratio is 1.6 , not 2 (hello window.devicePixelRatio) .

The aspectRatio property from MediaTrackConstraints returns the real aspect ratio: 1.6.

const [track] = (await navigator.mediaDevices.getDisplayMedia()).getVideoTracks();
console.log(track.getSettings().aspectRatio);

But there is one big caveat, this whole "Media Stream API" is about capturing video from the screen, that's why you have to get permissions for it to work. I couldn't find anything else that returns the real aspect ratio but this.

That's all I found in an hour or so, I hope there is enough information to make some conclusions.