0

Some web users may require larger fonts than the norm due to issues with their eyesight, and whilst traditionally designers may have implemented script that would resize text at the click of a button, browsers now have very handy zoom functions that work much more nicely to magnify an entire page and don't tend to create layout issues for developers.

Not all web users may be aware of these functions in their browsers or how to access them, so I was wondering if it's possible to add a zoom button to a website which controls the browser's zoom functionality, simplifying the user experience.

So, is it possible? Is it even a good idea?

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
Jack Roscoe
  • 4,293
  • 10
  • 37
  • 46

2 Answers2

1

You can do it via CSS on the body tag:

body {
  zoom: 200%;
}

Some simple javascript to increase/decrease the zoom level, and you've basically replicated the browser's "bigger/smaller" buttons.

Marc B
  • 356,200
  • 43
  • 426
  • 500
  • Note that this is a CSS3 feature and isn't supported in all browsers (Opera, Firefox). Also worth noting is that it won't affect the user's current zoom setting, so if you set `document.body.style.zoom = "200%"` and the user's current zoom setting is already 200%, you're effectively doubling their zoom level. – Andy E Oct 21 '11 at 14:59
  • True, but there's no way for a page to reach into the browser to trigger the browser's zoom capability, so this is the next best thing. – Marc B Oct 21 '11 at 15:00
0

Try this

jsfiddle.net

$(window).resize(function() {
    alert("yes");
});
Wazy
  • 8,822
  • 10
  • 53
  • 98