8

Is it possible to trigger Browser's zoom-in and zoom-out function through JavaScript?

I want to add Zoom-In(+) and Zoom-Out(-) buttons in my website, and by clicking on the button want to call browser's zoom-in (which can be called by pressing ctrl and +) / zoom-out (ctrl and -) function.

BenMorel
  • 34,448
  • 50
  • 182
  • 322
user160820
  • 14,866
  • 22
  • 67
  • 94
  • I removed the `javascript-events` tag as this question doesn't have an event aspect. – T.J. Crowder Dec 27 '10 at 16:12
  • possible duplicate of [Changing the browser zoom level](http://stackoverflow.com/questions/1055336/changing-the-browser-zoom-level) – derobert Dec 27 '10 at 16:25
  • I was able to write something that works for IE, Chrome and FF: http://stackoverflow.com/questions/4386760/calling-keyevent-from-mouse/4386873#4386873 – Shadow The GPT Wizard Dec 27 '10 at 16:41
  • Check my workaround for this issue at: http://stackoverflow.com/questions/1055336/changing-the-browser-zoom-level/12603229#12603229 – Vijey Sep 26 '12 at 13:49

3 Answers3

13

I do not believe there is a standards based way to do this. Certain browsers may offer their own API to do this but I am doubtful.

That being said I have accomplished this effect in the past through some CSS trickery. Essentially in your CSS define every measurement (width, height, margin, padding, font-size, etc.) in em instead of px. This essentially makes the size of everything dependent on the default font size of the document. Then to zoom 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 using their browser.

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

I hope this helps, it is a lot of work to do it right, but using em instead of px has helped me in countless ways when working with HTML and CSS.

joshwbrick
  • 5,882
  • 9
  • 48
  • 72
  • 2
    For the record, in modern browsers, this can be even easier to implement using rem (root em) instead of em. See http://snook.ca/archives/html_and_css/font-size-with-rem – arxpoetica Mar 21 '12 at 19:07
11

Think this was already answered with

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

"Zoom" a browser window/view with JavaScript?

Community
  • 1
  • 1
Gajit
  • 135
  • 1
  • 6
  • 1
    +1 for the quick-and-easy answer. Note that this state won't be saved like it will if you zoomed in with the browser, however. The developer should then save the zoom state in a session variable and replay it body.onLoad(), for example. – Michael Blankenship Jun 13 '15 at 22:34
  • Also note this throws off pixel calculations, such as when using JavaScript to calculate container heights that fill the page at 1.0 zoom. You would need to introduce a scaling coefficient. – agm1984 Jul 08 '22 at 15:50
0

I don't believe you can. On IE you could simulate it with the zoom CSS property, but that's non-standard and so support outside IE will vary.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875