使用javascript检测浏览器缩放级别

Question

是否可以在用户更改浏览器缩放级别时检测浏览器缩放级别，以及使用 javascript 的默认缩放级别。 我需要根据缩放级别的变化调用不同的 xml 文件。

Answer 1

我发现您必须因每个浏览器而异：

这在 safari 和 chrome 中非常有效：

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

这在 IE8+ 中运行良好（除非您的用户有一些奇怪的屏幕......）：

zoom = window.screen.deviceXDPI/96

对于 Firefox 和 IE7，我使用它，尽管我还没有让它在 Mac 上与 Firefox 一起使用......

祝你好运。

Answer 2

这将给出页面首次加载时相对于初始缩放的当前缩放比例，如果加载时没有缩放（100%），那么它将为您提供真实的当前缩放比例：

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
      );
    })