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

Posted

技术标签:

【中文标题】使用 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
      );
    )

【讨论】:

以上是关于使用 javascript 检测浏览器缩放级别的主要内容,如果未能解决你的问题,请参考以下文章

javascript检测浏览器的缩放状态实现代码 是指浏览器网页内容的百分比缩放(按Ctrl和+号键或者-号键的缩放)

javascript 浏览器缩放检测

如何以编程方式确定浏览器窗口的当前缩放级别? [复制]

Javascript / CSS:设置(firefox)iframe的缩放级别?

如何在 Internet Explorer 7 中获得缩放级别? (javascript)

浏览器不同缩放级别的媒体查询