Forced webpage will increase to 100% upon loading

Question

I am trying to set the website scale to 100%. I understand that firefox does not support this, but I'm trying to get it to work in chrome.

I set the scaling:

body { padding-top: 0px; padding-bottom: 20px; zoom: 100%; } 

And chrome seems to see the css effect:

But when I increase the scaling and updating, it does not return to 100%:

What am I doing wrong and how to fix it? CSS / HTML / jQuery answers are ok.

Edit: It seems the best approach so far is to simulate pressing Ctrl + 0 at boot. I figured out how to generate it, but how do you run it without user input?

 var press = jQuery.Event("keypress"); press.ctrlKey = true; press.which = 48; // trigger press 

Answer 1

You, the author of the web page, do not have (or should not have any power) the configuration of the user's browser. The browser zoom feature is an accessibility feature; many users rely on it to make the text readable. As a developer / designer, do your best to fit the 125 percent scale.

Answer 2

Firefox does not support the zoom property, because it (and has always been) is non-standard. It is intended only to scale the contents of a web page and is not intended to control the actual browser settings.

See https://css-tricks.com/almanac/properties/z/zoom/

Answer 3

As far as I know, you cannot change this zoom level. Key emulation Ctrl + 0 will not work, they will not go a step between your JavaScript and the DOM and the browser user interface for good reasons. All CSS values ​​(mentioned here too) trigger various scaling (for example, to increase one specific element).

My main question is: why do you want to fix the zoom level? There are many people outside that rely on this zoom feature to look less hard on your site. You still have to deal with different browser window sizes; different zoom levels can hardly tell you apart.