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

css, dpi, firefox, scaling, zooming

Solution

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.

Problem

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.

Original source