Force webpage to zoom to 100% on load

Question

I am trying to set the zoom of a website to 100%. I understand that firefox doesn't support this but I am trying to get it to work in chrome.

I've set the zoom:

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

And chrome appears to be seeing the css take effect:

But when I increase the zoom and refresh it does not get set back to 100%:

What am I doing wrong and how do I fix it? CSS/HTML/jQuery answers are all fine.

Edit: it looks like the best approach so far is to simuate a ctrl+0 keypress on load. I have figured out how to generate it but how do you trigger it without any user input?

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

Note that the CSS `zoom` property is completely different from setting the zoom level of the browser itself. — Rory McCrossan, Dec 22 '15 at 16:59
I don't think you can control browser's zoom property. And i hope you know that it is not related to `scale` of css. — void, Dec 22 '15 at 17:00
click `ctrl + 0` in `windows` and it will set to `100%` i think you are confused with browser and css zoom — Vitorino fernandes, Dec 22 '15 at 17:02
Can you issue a command of ctrl+0 with jQuery or javascript? — David Tunnell, Dec 22 '15 at 17:06
http://stackoverflow.com/questions/3893397/how-to-trigger-key-combo-with-jquery @DavidTunnell — Vitorino fernandes, Dec 22 '15 at 17:55
Sampson had an excellent point about designers needing to accommodate zoom (this is an accessibility feature). I'd offer this functionality as a button somewhere on the page to give users the option to zero out their zoom for the intended experience. — ecalvo, Jul 28 '17 at 14:04

score 7 · Answer 1 · answered Jul 21 '17 at 19:28

You, the author of the webpage, have no power (or should have no power) over the user's browser configuration. The browser's zoom feature is an accessibility feature; many users rely on it to make text readable. As the developer/designer, do your best to accommodate a 125% scale.

score 1 · Answer 2 · answered Dec 22 '15 at 17:00

1

Firefox does not support the zoom property, as it is (and has always been) non-standard. It only served to scale the content of a webpage, and isn't meant to control the actual browser's settings.

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

answered Dec 22 '15 at 17:00

gkubed

1,849
3
32
45

`zoom` does not change your browser's zoom level. For example, if you have the `zoom` property set to 50% in your code, and the user has the browser scaling at 125%, the webpage will most likely display at 62.5%. Web pages aren't meant to interfere with how the user wants to view the webpage. – gkubed Dec 23 '15 at 13:08

score 0 · Answer 3 · answered Jul 21 '17 at 20:33

As far as I know you can't modify that zoom level. Emulating Ctrl + 0 keystrokes won't work, they won't pass the step between your JavaScript and DOM and the browser UI, for good reasons. All CSS values (those mentioned here, too) trigger different zooms (for example to zoom one specific element).

My main question is why do you even want to fix the zoom level? There are many people outside who rely on that zoom feature in order to watch your website less tough. You anyway have to deal with different browser window sizes, different zoom levels hardly make any differences for you.

A. Some tablets make a bad job zooming out when they auto-zoom into a field. It would be nice to reset this when the field is blurred. The whole zooming property seems a bit of a hack and badly supported. — PeterS, Nov 22 '19 at 11:25

Force webpage to zoom to 100% on load

3 Answers3