Stop scaling Firefox DPI (when installing Windows at 125%)

Question

I'm currently building a webpage, and testing it in chrome works fine, but in Firefox it has been enlarged.

This is because my DPI on Windows is set to 125%, and Firefox detects this and adjusts each web page accordingly.

However, my webpage is not intended to be viewed at this zoom level, images should not be displayed large, and therefore they look blurry / pixel. The overall layout of the page is also corrupted, because everything is so large.

Now this does not affect most people - because their DPI will be 100% on Windows. However, I want it to be the same in all browsers.

I searched and found solutions so that the user can disable this "feature", but I want to disable it from my website, so it does not look wrong for the user in the first place.

eg. one post says:

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

But that is not what I am looking for. Is there a way to disable this from CSS / HTML / anything?

Thanks.

Answer 1

This also disappointed me, but, fortunately, there is a solution.

Go to about:config . (Click on any warnings to be careful with advanced features)

Find layout.css.devPixelsPerPx and change its value to 1.0 and your problem should be fixed.

This was implemented in Firefox 22 .

Answer 2

You can easily allow your websites to address settings with a higher zoom level to users, including a media query, for example:

 @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 a cleared media query solution is enough for broad browser support: IE9 +, Fx3.5 +, Opera9.5 +, Webkit Browsers Chrome and Safari, both Desktop and Mobile.

Answer 3

You can try something like this below. There are some caveats using this, but for some situations it is worth using.

  @media screen and (min-resolution: 120dpi) { /*body {transform: scale(0.8);width: 125%;height: 125%;margin-left: -12.5%;}*/ body {transform: scale(0.8);transform-origin:top left;width: 125%;height: 125%;} } 

Comment /*body....*/ An example of a scale may be easier to understand even worse, i.e. because scaling should be done based on the right right edge of css transform-origin. Then everything can be improved, especially in Chrome.

if you use width: 125% , your RWD css should react differently to resizing the browser based on what you expected when the screen ratio was 100%. And you can reasonably accept this - this is RWD, and the difference is 25%. But some people may want to adapt their css as follows:

 @media screen and (min-width: 1000px) 

You also need to configure:

 @media screen and (min-width: 800px) 

probably not 1250px, but 800px like me.

Edge, Chrome, FF are doing very well. IE 11 did the worst, but not hopelessly.

In FF (not edge, chrome) there are some problems when expanding selection fields - choosing a css solution. Some borders may be visible; some disappearing on FF (possibly not edge, chrome)

There may be some problems not mentioned here, for example, when you use a carousel, like owlcarousel on your page.

However, I think it is more likely to save more time, as this example has not been tested too much.

You need to use precise scaling, for example 0.8 for a 125% screen, so that your images are displayed as sharply as possible.

I noticed that when switching to different dpi resolutions using ctrl + / i in a desktop browser and, of course, using multi-touch gestures in mobile browsers, the browser also changes dpi, so any solution using @media min / max- resolution, may not work as expected. What you need in css is to read the resolution of the system, not the browser. However, as I see it, this resolution change does not occur, as when someone resizes the browser manually or rotates the mobile device.

Thanks to Tatsuyuki Ishi for fixing some of the errors in my answer.

Answer 4

Set the value to 1.25: this increases the user interface, but resets the website to 100% pixel display.