triggering browser Zoom-in and Zoom-out functions

Question

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.

Answer 1

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.