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

Question

We have a strange problem here. We have a website that has worked well since several years. A few months ago, Firefox began to scale the page depending on user DPI settings in its operating system.

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

The hard part: when I open the page, I see the correct layout. If I check the zoom level of the browser, it will tell me 100%. When I open the same page with firefox or Internet explorer, everything increases (increases) by 25%. If I check the zoom level in the browser settings, it says 100%. If I zoom out twice (up to 80%), I see the original layout.

Is there an easy way to set the default zoom / zoom scale by CSS, JavaScript, or perhaps a title tag?

Here are some screenshots to explain my problem a bit.

This is the correct layout that has been used in recent years. The page is in the center and there is a bit of background on the left and right

In Firefox, IE, and Safari, the same page on the same computer looks like this. It is enlarged, you do not see the background, and you see a little less than the entire content.

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

Edit:

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

Edit:

Yes, it is possible to determine the set scale. At least for my setup it works now. I am adding a screenshot with two browsers open on the same computer (top chrome, bottom layer of firefox) to see the difference (and a problem that should be seriously fixed by someone).

Answer 1

You can check the level of the browser screen using javascript and increase the page content accordingly using css (if necessary).

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

Where zoom2x is the css class.

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

You can cross-check the current dpi settings here and check the results.

Answer 2

There is no code fix for this, but you can fix it by changing your browser settings. See links below:

https://support.mozilla.org/en-US/questions/962979 Stop scaling DPI Firefox (when installing Windows at 125%)