Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 560
Brugsen Avatar asked Apr 16 '14 04:04

Brugsen


People also ask

How do I turn off high DPI settings scaling?

Right-click the application, select Properties, select the Compatibility tab, and then select the Disable display scaling on high DPI settings check box.

How do I change DPI in Firefox?

Firefox has its own DPI mode, not always plays well in a desktop environment with modified DPI, yet the solution is simple: First go to a firefox tab and type: "about:config", next in the search bar type: "layout. css. devPixelsPerPx" now change the Value to what you like.

How do I change my DPI to 100 scale?

Alternatively, right click on an empty area on your desktop and select Display. In System, settings screen click on Displayoption from left side. Under Change the size of text, apps, and other items: 100% (Recommended), move the slider left or right to the DPI percentage you want to set for that display.


1 Answers

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.

like image 90
Volker E. Avatar answered Oct 03 '22 22:10

Volker E.