Who to control browser level zoom that should work with all cross platform browser-CodePudding

I am looking for JS script to control browser's zoom.

I have tried the "document.body.style.zoom", but this doesn't work with Firefox.

Thanks you.

CodePudding user response：

The browser's zoom level cannot be controlled via JavaScript, fortunately. It's a user-controlled setting.^[1]

The zoom CSS property indeed does a similar thing - not only it scales the element but it also scales it's rendered size, affecting the page's layout. However, unlike changing the browser's zoom level, the zoom property does not affect media queries (tested on Chrome) so even if applied to the <html> or <body> element the result may be different than changing the browser's zoom. The other problem is that the zoom property is not standard and not supported cross-browsers.

An alternative is to apply a transformation like transform: scale(2); or transform: scale(0.5); . However transformations only change the element visually and not the rendered size, so you will need to handle that too. The following code seems to mimic a zoom level of 50% reasonably:

:root {
    width: 200%;
    transform: scale(0.5);
    transform-origin: 0 0;
}

^[1] It can be controlled by browser extensions privileged JS, but that's out of question. There is also a <meta> tag setting that controls zoom level but it's only for smartphones and can also be overriden by browser settings.