The Industry

Determining and detecting Page Zoom levels in IE and Firefox

Page zoom is when the user zooms in and out of a page on a website by using ctrl + and ctrl - (or ctrl scrollwheel) increasing or decreasing the font and other stuff that the browser implementers thought would be easy at the time .

Oh, Shakespeare needed to write a tragedy about all the things programmers thought ‘would be easy at the time’.

Both Internet Explorer and Firefox try and do this - and they do it quite differently. We are not going to go into HOW they do it differently - even less people care about that than they do about being able to determine the zoom level. We are posting this because the code found on the internet - although helpful in pointing the way - did not work or was … verbose.

OK.

The javascript code returns a page zoom level of 1.0 for the default zoom level, about 1.2 for the zoom level I like to use, and in general I’ve seen numbers between about 0.75 and 1.5.

First (or second, whatever), insert an element somewhere on the page. We used a div.

<div id="zoom_level_detector" style="left:100px;height:1em;position:absolute;font-size:16px;"></div>

Our default font size is 16. If yours is different, change the 16 in the javascript to the font size your app is using where you inserted the div. There are tons of places online to find how to determine what browser your code is running in (isIE). The $ method is provided by prototype.js to do a lookup on the id of an element.

function getPageZoom()
	{
	var detector = $("zoom_level_detector");
	var zoom = 1.0;
	if (isIE)
		{
		zoom = detector.offsetLeft / detector.style.pixelLeft;
		}
	else
		{
		zoom = detector.offsetHeight / 16;
		}
	return(zoom);
	}

To detect when the user zooms in or out, just keep polling this function using setTimeout or setInterval, watching for changes to the value the getPageZoom function is returning.

Enjoy!