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?
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.
