4
votes

Is it possible to detect the browser zoom level when the user changed the zoom level of browser, and the default zoom level using javascript. I need to call different xml files according to the zoom level change.

2
-1: Don't repost the same question just because you don't like the original answer.zzzzBov
Especially when the original answer was perfectly valid.Christian Mann

2 Answers

6
votes

I found that you have to vary for each browser:

This works great in safari and chrome:

zoom = parseInt(document.defaultView.getComputedStyle(document.documentElement, null).width,10)/document.documentElement.clientWidth

This works well in IE8+ (unless your user has some freakish screen....):

zoom = window.screen.deviceXDPI/96

And for Firefox and IE7 I use this although I still haven't got it to work with Firefox on the Mac...

Good luck.

0
votes

This will give the current zoom ratio relative to the initial zoom when the page was first loaded , if it was loaded with no zoom ( 100% ) then it will give you the real actual current zoom :

window.addEventListener('resize',()=>{
    var height = Math.max( body.scrollHeight, body.offsetHeight, 
      html.clientHeight, html.scrollHeight, html.offsetHeight );
      const ratio = ( height /  document.documentElement.clientHeight )
      if (!window.zc_)
      {
        window.zc_ = 100/ratio
      }
    const zoom = ratio* window.zc_
    console.log(
      zoom
      );
    })