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

Posted 2023-02-21

【中文标题】使用 javascript 检测浏览器缩放级别

【英文标题】：Detect Browser zoom level using javascript

【发布时间】：2011-05-07 01:11:58

【问题描述】：

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

【问题讨论】：

-1：不要仅仅因为你不喜欢原来的答案就转发同一个问题。

尤其是当原始答案完全有效时。

【参考方案1】：

我发现你必须为每个浏览器而变化：

这在 safari 和 chrome 中效果很好：

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

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

zoom = window.screen.deviceXDPI/96

对于 Firefox 和 IE7，我使用 this 虽然我还没有让它在 Mac 上与 Firefox 一起工作......

祝你好运。

【参考方案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
      );
    )