I’ve noticed that a small laptop with a 1920×1080 screen, windows 10 will auto adjust the scaling. I’ve seen it as high as 150%. Is there a way we can detect this? My media queries don’t kick in as they’re set in px.
Advertisement
Answer
Try accessing window.devicePixelRatio
variable.
The Window property devicePixelRatio returns the ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device. This value could also be interpreted as the ratio of pixel sizes: the size of one CSS pixel to the size of one physical pixel. In simpler terms, this tells the browser how many of the screen’s actual pixels should be used to draw a single CSS pixel.
More info about it: https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio
You could also use CSS resolution
for this, more about this here: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution
@media (resolution: 150dpi) { p { color: red; } }