Geek Answers Handbook

Launch Browser Zoom and Zoom Features

Is it possible to activate the zoom and zoom function of the browser using JavaScript?

I want to add the Zoom-In (+) and Zoom-Out (-) buttons on my website and clicking on the button to cause the browser to zoom in (which can be called up by pressing ctrl and +) / zoom-out (ctrl and - )

+6
javascript
source share
3 answers

I do not believe that there is a standard way to do this. Some browsers may offer their own API for this, but I doubt it.

Speaking of which, I have done this effect in the past with some CSS tricks. Essentially, your CSS defines each dimension (width, height, edge, padding, font size, etc.) in em instead of px. As a result, the size depends on the default font size for the document. Then, to zoom in, you change the font size of the body tag to make things smaller or larger. If you do this carefully, the effect will look the same as if the user zoomed in using their browser.

To make life easier with this, I like to use the CSS reset stylesheet, which sets 1em to 10px. Thus, if you want the div to be 200 pixels wide, you just set it to 20em. You can do this by setting the body font size to 62.5% in the CSS reset stylesheet. Since most browsers have a default font size of 16px and therefore 1em = 16px, 10px is 62.5%.

Hope this helps, working on it very well, but using em instead of px has helped me in countless ways when working with HTML and CSS.

+10
source share

I think this has already been answered

window.parent.document.body.style.zoom = 1.5;

"Enlarge" browser window / view using JavaScript?

+4
source share

I do not believe that you can. In IE, you can simulate it using the CSS zoom property, but this non-standard and, therefore, support outside IE will vary.

0
source share

More articles:


All Articles