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 qu

Answer 1

This isn't specifically what OP asked for, but what I think a lot of users landing on this question will be asking..

150% text scaling in Windows 10 is breaking my webpage, what can I do about it?

Approach

1. First, make sure you're using rem for font-sizing on the problem text. rem is designed for this situation.
2. Now you can scale ALL text at once with a single media query from the root html element.

This avoids any CSS transform scaling which inevitably results in a blurry result.

HTML root media query

    /* Handle 125% and 150% Windows 10 Font Scaling */
    @media (min-resolution: 120dpi) {
        html {
             font-size: 80%;
        }
    }

Adjust the 80% to your liking, less = smaller text

Note: For some reason when I had 150% scaling only @media (resolution: 144dpi) worked. At 150% you would expect 150dpi to work, not 144dpi. So, beware of this strange bug.

rem Font-Sizing

And make sure you're using rem for fonts, for example:

    p {
        font-size: 1rem;
    }

If you're using px, you don't have to change everything, just do it for the text that is causing issues.