css - Stop Firefox DPI Scaling (when Windows setting is at 125%)

Question

I'm currently making a webpage and testing it in chrome works fine, but in Firefox - it is zoomed in.

This is because my DPI in Windows is set to 125%, and Firefox detects this, and adjusts every webpage accordingly.

However, my webpage is not meant to be viewed at such a zoom level, the images aren't made to be displayed that big, and hence it looked blurred/pixelated. The general layout of the page is messed up too, because everything is so big.

Now, this doesn't affect most people - as their DPI would be at 100% in Windows. However, I want it to be the same on all browsers.

I've searched and have found solutions as for the user to disable this "feature" - but I want to be able to disable it from my website - so it doesn't look wrong to the user in the first place.

e.g. one post says:

1) Type about:config in address bar
2) search for layout.css.devPixelsPerPx
3) change value of layout.css.devPixelsPerPx from -1.0 to 1.0

But that isn't what I'm looking for. Is there any way to disable this from CSS/HTML/anything?

Thanks.

Answer 1

You could easily let your website address users with settings at higher zoom levels by including a media query like:

@media only screen and( -webkit-min-device-pixel-ratio: 1.25 ),
       only screen and(      -o-min-device-pixel-ratio: 5/4 ),
       only screen and( min-resolution: 120dpi ),
       only screen and( min-resolution: 1.25dppx ) {
    body {
        font-size: 1rem;
    }
} 

See this article for an extended explanation and why the cleaned up solution of the media query is sufficient for a broad browser support: IE9+, Fx3.5+, Opera9.5+, Webkit Browsers Chrome and Safari, both Desktop and Mobile.