Instead of having us calculate real pixel density or physical screen dimensions based on a hidden DOM element, we could also be given some simple global to look at, containing float values:
window.screen.pixelDensity // in dots per inch? Different windows could have different densities depending on which display they are placed on.
window.screen.verticalPixelDensity // yes, the vertical density
window.screen.horizontalPixelDensity // could be different from the horizontal density.
The value of window.devicePixelRatio
could also be configurable, using the viewport <meta>
tag in the <head>
.
// somewhere in the head
<meta viewport="name" content="device-pixel-ratio=1"/>
This would happen in the meta tag in the head so that it applies before rendering takes place. Now the content of the window would be rendered using the pixels of the device (in most cases, this matches one-to-one with the actual pixels of the device).
Additionally, there may be situation when a device pixel ratio of 1 doesn’t necessarily mean that the content is actually rendered one-to-one with the hardware pixels. It would be important to let these cases be more important, so that for example someone who tweaks defaults and wants everything scaled bigger or smaller on purpose won’t be disappointed. There should be a way to detect if this is the case or not, for example
if (window.devicePixelRatio == 1 && window.screen.matchesHardware) {
// We know we have one-to-one drawing abilities with the display pixels.
}
else {
// We know we don't.
// Perhaps in this case there are other properties exposed like `permanentRatio` that can be used to handle certain cases.
// Many developers will probably not have code here, but some of us would love to.
}
Alternatively, perhaps the spec could require window.devicePixelRatio
to always be correct, even if the user zooms, or has some other OS-dependeny scaling, etc. This is totally possible to implement.
Those are just ideas, and would probably need to be refined, but essentially, I think have that control would be great. I can do it in native frameworks (Qt for example).
So, why not in the web?