How do I programmatically determine the current zoom level of a browser window?

Question

I want to find out the zoom level of what is being displayed in a browser window based on the javascripts' window object properties to which I have access. I just can't seem to find the right mathematical formula for the zoom based on the inner width, page offset, etc. I found a solution, but that uses the document.body.getBoundingClientRect call which does not return anything in my case and for which I can't tell if there's a suitable replacement from the window properties. I am using Safari.

score 1 · Answer 1 · answered May 11 '10 at 15:48

1

You can determine zoom level by comparing various properties to document.documentElement.clientWidth depending on your browser:

vs. window.outerWidth (on Opera)
vs. document.defaultView.getComputedStyle(document.documentElement, null).width (on Safari, Chrome)
or compare screen.deviceXDPI and screen.logicalXDPI (on IE8).

The ratio of these values is the current zoom level (e.g. a ratio of 2 indicates a zoom of 200%).

answered May 11 '10 at 15:48

John Feminella

303,634
46
339
357

2

If I use document.documentElement.clientWidth and document.defaultView.getComputedStyle(document.documentElement, null).width I always get the same values (920 and 2080), no matter the zoom. – Mihai Fonoage May 11 '10 at 16:11
Does it makes sense to say that zoom = window.pageYOffset/window.innerHeight * 100? – Mihai Fonoage May 11 '10 at 16:36
Hmm.. this seems to work for me on Chrome, and I assumed it would work on Safari too since it's also using Webkit, but it's possible versioning differences may be coming into play here. – John Feminella May 11 '10 at 19:20
@John Feminella What about ff? – GC_ Jan 10 '12 at 21:33
Doesn't work for me on Chrome. – Aayush Kumar Dec 05 '13 at 03:25

score -1 · Answer 2 · answered Nov 16 '11 at 08:28

here's a rough estimate approach that determines zoom ratio by looking at the difference between the window's inner and available width (with and without the scrollbar), and compares that to what the scrollbar width should be at a 100% ratio. It currently depends on jquery, and some more work should be done to figure out the exact expected scrollbar width for various browsers (currently just using 15 pixels, which seems to be about the norm).

function getZoom(){ 

    var ovflwTmp = $('html').css('overflow');
    $('html').css('overflow','scroll');

    var viewportwidth;  
    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight 
    if (typeof window.innerWidth != 'undefined')  {
        viewportwidth = window.innerWidth;
    } else if (typeof(document.documentElement) != 'undefined'  && 
        typeof document.documentElement.clientWidth != 'undefined' && 
        document.documentElement.clientWidth != 0) {
        // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document) 
        viewportwidth = document.documentElement.clientWidth; 
    } else { 
        // older versions of IE 
        viewportwidth = document.getElementsByTagName('body')[0].clientWidth; 
    }

    var windW = $(window).width();  
    var scrollBarW = viewportwidth - windW; 

    if(!scrollBarW) return 1;

    $('html').css('overflow',ovflwTmp);

    return  (15 / scrollBarW); 
}

While this isn't perfect, it's the best I've been able to come up with thus far for this kind of thing. I'm currently using it to know when to serve up high-resolution images, if the user has zoomed to the point of making them blurry.

How do I programmatically determine the current zoom level of a browser window?

2 Answers2