imitate browser zoom with JavaScript

javascript zoom
lior r picture lior r · May 5, 2012 · Viewed 55.4k times · Source

How is it possible to zoom out an entire document with JavaScript ?

My goal is to imitate the built-in browser zoom and zoom the entire document to 90%.

I have tried using

document.body.zoom

This works only with explorer and the page gets messy (a lot of elements are moving around).

Is there a way to do this?

Answer

creativeby picture creativeby · May 5, 2012

There you go:

Use: 

document.body.style.zoom=1.0;this.blur();

1.0 means 100%

150% would be 1.5 1000% would be 10.0

this.blur() means that the curser, maybe you selected an input field, looses focus of every select item.

or:

You can use the css3 element zoom (Source)

Firefox does not allow zooming with the browser because you can't access the user properties via javascript or sth.

So you can just use some CSS styles which allow to zoom (CSS3: zoom, as mentioned above) or to increase the text size! Which you could do with including a different CSS file for example. But here you have the "jumpy" problem, because the styled css elements (floated etc.) have to "interact" different in fact of their attributes.

The zoom I posted above works well in Chrome and IE8+ (FF not supported as mentioned)

-- Additional information:

Here is an example on how to zoom exactly with the zoom option. Example application can be found here

The zoom option normally handles the zoom as your browser does!

But this is still all stuff, which is not supported by Firefox, or maybe Safari & Opera? In chrome and IE it works!

Another solution would be: Place your main sizes in "em", and then work around by setting sizes like 100%, 110% (all over the css). So you could have differen CSS files, and "just" need to replace the % attributes!

Yet I don't think there might be other solutions! :(

Related questions

How to detect page zoom level in all modern browsers?

How can I detect the page zoom level in all modern browsers? While this thread tells how to do it in IE7 and IE8, I can't find a good cross-browser solution. Firefox stores the page zoom level for future access. …

Read More
Changing the browser zoom level

I have need to create 2 buttons on my site that would change the browser zoom level (+) (-). I'm requesting browser zoom and not css zoom because of image size and layout issues. Well, is this even possible? I've heard conflicting …

Read More
Catch browser's "zoom" event in JavaScript

Is it possible to detect, using JavaScript, when the user changes the zoom in a page? I simply want to catch a "zoom" event and respond to it (similar to window.onresize event). Thanks.

Read More