Force Zoom-Level/DPI-Scale with CSS, Header-Tag or JavaScript

Question

We have a strange issue here. We have a website wich worked nice since a few years. A couple of months ago, Firefox startet to scale the page depending on the user DPI-settings on his operating system.

The problem is, by default the DPI scale is set to 125% (in our country) in Windows 7 and every visitor using Firefox sees the page scaled. Howevery, Internet Explorer and Safari now doing the same, and I guess chrome will follow.

The tricky part is: When I open the page I see the correct layout. If I check the zoom level of the browser it tells me 100% - When I am opening the same page with firefox or Internet explorer, everything is scaled up (zoomed in) by 25%. If i check the zoom level in the browser settings, it says 100%. If I zoom out twice (to 80%) I see the original layout.

Is there an easy way to set the default dpi scale / zoom level by CSS, JavaScript or maybe a header tag?

Here are some screenshots to explain my issue a bit.

The "right" layout This is the right layout as used to over the past years. The page is centered and on the left and right side is a bit of the background

the "zoomed" in On Firefox, IE and Safari the same page on the same computer looks like this. It is zoomed in, you don't see the background and you see a bit less of the total content.

So now my question: what can I do, to make the same page look the same way on different computers as it comes to the scaling. I know several things always differ but the scale should be the same.

Edit:

Always scaling the page with transform: scale(.75); transfor-origin: 100%; 0; is not always suitable, because if a user with 100% DPI setting visits the page, everything is minimized for him. I can not always scale the page. I need to somehow identify if the user has set his operating system to 100% or 125% DPI scaling.

Edit:

Yes there is an option to determine the setted scale rate. At least for my setup this works by now. I add a screenshot with two browsers opened on the same machine (chrome top, firefox bottom) to see the difference (and the problem which seriously needs to get fixed by someone)

device pixel ratio differnce from browser to browser on the same machine<code>enter code here</code>

Wel I guess you could scale the body to always fit with width:100vw and then using the % to scale elements to always get the browser to look the same to every one. But I guess that's a lot of work on an already coded site. — Persijn
@Persijn Yes this is true, it would be a lot of work. I praise the lord when we finally decide to emigrate to a new shop system and drop this self made demon to where it belongs, the deepest part of hell -_- — Ello
stackoverflow.com/questions/995914/… Sorry its not possible — Persijn

nalinc nalinc · Accepted Answer · 2015-01-20T18:07:14

You can check the browser dpi level with javascript and zoom the page contents accordingly with css(if needed).

if(window.devicePixelRatio == 1 )
  $("body").addClass("zoom2x")

Where zoom2x is a css class.

.zoom2x{
      zoom: 200%; /* all browsers */
     -moz-transform: scale(2);  /* Firefox */
}

You may crosscheck your current dpi setting here and verify results.

Force Zoom-Level/DPI-Scale with CSS, Header-Tag or JavaScript

2 Answers