Detect scale settings (dpi) with JavaScript or CSS

Question

I've noticed that a small laptop with a 1920x1080 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.

Answer 1

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;
  }
}