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.

Solution 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.

Solution 2

This frustrated me too, but luckily there is a solution.

Navigate to about:config. (Click accept on any warnings telling you to be careful with advanced features)

Search for layout.css.devPixelsPerPx and change its value to 1.0 and your issue should be fixed.

It was something implemented in Firefox 22.

Solution 3

I did this way, zoom works better than transform, it doesn't make fixed elements absolute:

@media screen and (min-resolution: 120dpi) { 
body {zoom: 0.8;}
}

Comments

[Ello]

not related to the question. This (if works) is a local thing. But the user who visits the page usually does not have this setting enabled. In some countries 125% is the default setting in windows.

[Glenn Jorde]

Correct link: brettjankord.com/2012/11/28/…

[Volker E.]

@GlennJorde Also the HTTPS link doesn't seem to work any more… :/