10赞

如何在所有现代浏览器中检测页面缩放级别？

作者：LEEstarmmmmm | 2023-08-15 19:47

如何解决《如何在所有现代浏览器中检测页面缩放级别？》经验，为你挑选了7个好方法。

现在,它比第一次提出这个问题时更加混乱.通过阅读我能找到的所有回复和博客文章,这里有一个摘要.我还设置了此页面来测试所有这些测量缩放级别的方法.

编辑(2011-12-12):我添加了一个可以克隆的项目:https://github.com/tombigel/detect-zoom

IE8 :( screen.deviceXDPI / screen.logicalXDPI或者,相对于默认缩放的缩放级别screen.systemXDPI / screen.logicalXDPI)

IE7 :( var body = document.body,r = body.getBoundingClientRect(); return (r.left-r.right)/body.offsetWidth;感谢这个例子或这个答案)

仅限FF3.5:screen.width/媒体查询屏幕宽度(见下文)(利用screen.width使用设备像素但MQ宽度使用CSS像素的事实- 由于Quirksmode宽度)

FF3.6:没有已知的方法

FF4 +:媒体查询二进制搜索(见下文)

WebKit:https://www.chromestatus.com/feature/5737866978131968(感谢Teo在评论中)

WebKit:测量div的首选大小-webkit-text-size-adjust:none.

WebKit :(自r72591以来打破)document.width / jQuery(document).width()(感谢上面的Dirk van Oosterbosch).要获得设备像素(而不是相对于默认缩放)的比率,请乘以window.devicePixelRatio.

旧的WebKit？(未经证实):( parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth来自这个答案)

Opera:document.documentElement.offsetWidth/ position:fixed; width:100%div的宽度.从这里(Quirksmode的宽度表说它是一个bug; innerWidth应该是CSS px).我们使用position:fixed元素来获取视口的宽度,包括滚动条所在的空间 ; document.documentElement.clientWidth排除此宽度.这在2011年的某个时候被打破了; 我知道无法再在Opera中获得缩放级别.

其他:塞巴斯蒂安的Flash解决方案

不可靠:收听鼠标事件并测量clientX中screenX/change的变化

这是Firefox 4的二进制搜索,因为我不知道它暴露的任何变量:


Dummy element to test media queries.

好消息,大家好!他们最终做到了!Vieport API!https://www.chromestatus.com/feature/5737866978131968我测试它,很棒的东西! (5认同)

Viewport API仅适用于缩放缩放; 如果你放大桌面它说比例是1. @Jason T Featheringham除了"歧视"之外还有其他理由想知道缩放级别.缩放是在域的所有页面上设置的,但您可能希望在游戏页面或扩展程序弹出窗口中以不同于帮助页面的方式处理它. (2认同)

user1080381.. 51

你可以试试

var browserZoomLevel = Math.round(window.devicePixelRatio * 100);

这将为您提供浏览器缩放百分比级别.

要捕捉缩放事件,您可以使用

$(window).resize(function() { 
// your code 
});

支持高DPI屏幕的浏览器在使用此类显示器时不会产生预期结果,Safari也不会显示. (15认同)

不能按预期工作:当浏览器未缩放时,它在带有视网膜的MacBook上的Chrome中返回200. (11认同)

小智.. 45

对我来说,对于Chrome/Webkit,document.width / jQuery(document).width()没有用.当我将窗口缩小并放大到我的网站时,出现水平滚动条,document.width / jQuery(document).width()在默认缩放时不等于1.这是因为document.width在视口外部包含部分文档.

使用window.innerWidth和window.outerWidth工作.出于某些原因,在Chrome中,outerWidth以屏幕像素为单位,innerWidth以css像素为单位进行测量.

var screenCssPixelRatio = (window.outerWidth - 8) / window.innerWidth;
if (screenCssPixelRatio >= .46 && screenCssPixelRatio <= .54) {
  zoomLevel = "-4";
} else if (screenCssPixelRatio <= .64) {
  zoomLevel = "-3";
} else if (screenCssPixelRatio <= .76) {
  zoomLevel = "-2";
} else if (screenCssPixelRatio <= .92) {
  zoomLevel = "-1";
} else if (screenCssPixelRatio <= 1.10) {
  zoomLevel = "0";
} else if (screenCssPixelRatio <= 1.32) {
  zoomLevel = "1";
} else if (screenCssPixelRatio <= 1.58) {
  zoomLevel = "2";
} else if (screenCssPixelRatio <= 1.90) {
  zoomLevel = "3";
} else if (screenCssPixelRatio <= 2.28) {
  zoomLevel = "4";
} else if (screenCssPixelRatio <= 2.70) {
  zoomLevel = "5";
} else {
  zoomLevel = "unknown";
}

小智.. 16

我和我的同事使用了https://github.com/tombigel/detect-zoom的脚本.此外,我们还动态创建了一个svg元素并检查其currentScale属性.它适用于Chrome,也可能是大多数浏览器.在FF上,必须关闭"仅缩放文本"功能.大多数浏览器都支持 SVG .在撰写本文时,在IE10,FF19和Chrome28上进行了测试.

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svg.setAttribute('version', '1.1');
document.body.appendChild(svg);
var z = svg.currentScale;
... more code ...
document.body.removeChild(svg);

从Chrome 45开始,这不再适用. (3认同)

小智.. 11

我发现这篇文章非常有帮助.非常感谢yonran.我想在实现他提供的一些技术时传递一些额外的学习知识.在FF6和Chrome 9中,增加了对JS媒体查询的支持,这可以大大简化确定FF缩放所需的媒体查询方法.请在此处查看MDN上的文档.出于我的目的,我只需要检测浏览器是否放大或缩小,我不需要实际的缩放系数.我能用一行JavaScript得到答案:

var isZoomed = window.matchMedia('(max--moz-device-pixel-ratio:0.99), (min--moz-device-pixel-ratio:1.01)').matches;

将此与IE8 +和Webkit解决方案(也是单行)相结合,我能够通过仅几行代码检测绝大多数浏览器上的缩放.

1> yonran..：

编辑(2011-12-12):我添加了一个可以克隆的项目:https://github.com/tombigel/detect-zoom

IE8 :( screen.deviceXDPI / screen.logicalXDPI或者,相对于默认缩放的缩放级别screen.systemXDPI / screen.logicalXDPI)

IE7 :( var body = document.body,r = body.getBoundingClientRect(); return (r.left-r.right)/body.offsetWidth;感谢这个例子或这个答案)

仅限FF3.5:screen.width/媒体查询屏幕宽度(见下文)(利用screen.width使用设备像素但MQ宽度使用CSS像素的事实- 由于Quirksmode宽度)

FF3.6:没有已知的方法

FF4 +:媒体查询二进制搜索(见下文)

WebKit:https://www.chromestatus.com/feature/5737866978131968(感谢Teo在评论中)

WebKit:测量div的首选大小-webkit-text-size-adjust:none.

旧的WebKit？(未经证实):( parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth来自这个答案)

其他:塞巴斯蒂安的Flash解决方案

不可靠:收听鼠标事件并测量clientX中screenX/change的变化

这是Firefox 4的二进制搜索,因为我不知道它暴露的任何变量:


Dummy element to test media queries.

好消息,大家好!他们最终做到了!Vieport API!https://www.chromestatus.com/feature/5737866978131968我测试它,很棒的东西!

Viewport API仅适用于缩放缩放; 如果你放大桌面它说比例是1. @Jason T Featheringham除了"歧视"之外还有其他理由想知道缩放级别.缩放是在域的所有页面上设置的,但您可能希望在游戏页面或扩展程序弹出窗口中以不同于帮助页面的方式处理它.

2> user1080381..：

你可以试试

var browserZoomLevel = Math.round(window.devicePixelRatio * 100);

这将为您提供浏览器缩放百分比级别.

要捕捉缩放事件,您可以使用

$(window).resize(function() { 
// your code 
});

支持高DPI屏幕的浏览器在使用此类显示器时不会产生预期结果,Safari也不会显示.

不能按预期工作:当浏览器未缩放时,它在带有视网膜的MacBook上的Chrome中返回200.

3> 小智..：

使用window.innerWidth和window.outerWidth工作.出于某些原因,在Chrome中,outerWidth以屏幕像素为单位,innerWidth以css像素为单位进行测量.

var screenCssPixelRatio = (window.outerWidth - 8) / window.innerWidth;
if (screenCssPixelRatio >= .46 && screenCssPixelRatio <= .54) {
  zoomLevel = "-4";
} else if (screenCssPixelRatio <= .64) {
  zoomLevel = "-3";
} else if (screenCssPixelRatio <= .76) {
  zoomLevel = "-2";
} else if (screenCssPixelRatio <= .92) {
  zoomLevel = "-1";
} else if (screenCssPixelRatio <= 1.10) {
  zoomLevel = "0";
} else if (screenCssPixelRatio <= 1.32) {
  zoomLevel = "1";
} else if (screenCssPixelRatio <= 1.58) {
  zoomLevel = "2";
} else if (screenCssPixelRatio <= 1.90) {
  zoomLevel = "3";
} else if (screenCssPixelRatio <= 2.28) {
  zoomLevel = "4";
} else if (screenCssPixelRatio <= 2.70) {
  zoomLevel = "5";
} else {
  zoomLevel = "unknown";
}

4> 小智..：

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svg.setAttribute('version', '1.1');
document.body.appendChild(svg);
var z = svg.currentScale;
... more code ...
document.body.removeChild(svg);

从Chrome 45开始,这不再适用.

5> 小智..：

var isZoomed = window.matchMedia('(max--moz-device-pixel-ratio:0.99), (min--moz-device-pixel-ratio:1.01)').matches;

将此与IE8 +和Webkit解决方案(也是单行)相结合,我能够通过仅几行代码检测绝大多数浏览器上的缩放.

您能否提供一个如何使用媒体查询检测实际缩放的代码？

6> 小智..：

zoom = ( window.outerWidth - 10 ) / window.innerWidth

这就是你所需要的.

在Chrome上运行得很好,在FF上根本不起作用.

7> 小智..：

截至2016年1月,我有一个解决方案.测试过Chrome,Firefox和MS Edge浏览器.

原理如下.收集相距很远的2个MouseEvent点.每个鼠标事件都带有屏幕和文档坐标.测量两个坐标系中2个点之间的距离.虽然由于浏览器家具,坐标系之间存在可变的固定偏移,但如果页面未缩放,则点之间的距离应相同.指定"远离"(我把它设为12像素)的原因是可以检测到小的变焦变化(例如90%或110%).

参考:https: //developer.mozilla.org/en/docs/Web/Events/mousemove

脚步:

添加鼠标移动侦听器

window.addEventListener("mousemove", function(event) {
    // handle event
});

从鼠标事件中捕获4个测量值:

event.clientX, event.clientY, event.screenX, event.screenY

测量客户端系统中2个点之间的距离d_c

测量屏幕系统中2个点之间的距离d_s

如果d_c!= d_s则应用缩放.两者之间的差异告诉你缩放量.

NB很少进行距离计算,例如,当您可以采样远离前一个的新鼠标事件时.

限制:假设用户将鼠标移动至少一点,并且在此之前缩放是不可知的.

推荐阅读

程序员
我在java 8 lambda Predicate <Integer>上做错了什么？

如何解决《我在java8lambdaPredicate<Integer>上做错了什么？》经验，为你挑选了1个好方法。 ... [详细]
程序员
ACF Pro中的add_row不保存转发器值

如何解决《ACFPro中的add_row不保存转发器值》经验，为你挑选了1个好方法。 ... [详细]
程序员
python中字典和ordereddict之间的区别

如何解决《python中字典和ordereddict之间的区别》经验，为你挑选了2个好方法。 ... [详细]
程序员
如何使用凌空实现摘要式身份验证？

如何解决《如何使用凌空实现摘要式身份验证？》经验，为你挑选了0个好方法。 ... [详细]
程序员
iOS Sdk谷歌Chromecast字幕

如何解决《iOSSdk谷歌Chromecast字幕》经验，为你挑选了0个好方法。 ... [详细]
程序员
MyBatis使用注释批量插入/更新

如何解决《MyBatis使用注释批量插入/更新》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何根据属性的存在将条件语句添加到指令？

如何解决《如何根据属性的存在将条件语句添加到指令？》经验，为你挑选了1个好方法。 ... [详细]
程序员
在新标签中打开网址

如何解决《在新标签中打开网址》经验，为你挑选了2个好方法。 ... [详细]
程序员
new AjaxUpload只接受来自按钮标记的图像

如何解决《newAjaxUpload只接受来自按钮标记的图像》经验，为你挑选了0个好方法。 ... [详细]
程序员
如何在Corsjurescript的Cursive中设置配置？

如何解决《如何在Corsjurescript的Cursive中设置配置？》经验，为你挑选了1个好方法。 ... [详细]
程序员
多个单词的md-highlight-text

如何解决《多个单词的md-highlight-text》经验，为你挑选了0个好方法。 ... [详细]
程序员
创建自定义完成/回调处理程序以在HTTP请求完成后返回对象

如何解决《创建自定义完成/回调处理程序以在HTTP请求完成后返回对象》经验，为你挑选了0个好方法。 ... [详细]
程序员
从远程HDFS检索文件

如何解决《从远程HDFS检索文件》经验，为你挑选了1个好方法。 ... [详细]
程序员
[::]在我的nginx配置文件中意味着什么

如何解决《[::]在我的nginx配置文件中意味着什么》经验，为你挑选了1个好方法。 ... [详细]
程序员
什么是iOS中的企业部署节省(XCode 7)

如何解决《什么是iOS中的企业部署节省(XCode7)》经验，为你挑选了1个好方法。 ... [详细]
程序员
为什么DataTable TableTools导出为pdf或excel或csv不能与私有浏览器一起使用？

如何解决《为什么DataTableTableTools导出为pdf或excel或csv不能与私有浏览器一起使用？》经验，为你挑选了1个好方法。 ... [详细]
程序员
获取当前位置0在marshmallow,其中23 API以下,它给出了精确的当前位置使用融合位置

如何解决《获取当前位置0在marshmallow,其中23API以下,它给出了精确的当前位置使用融合位置》经验，为你挑选了2个好方法。 ... [详细]
程序员
如何使用图像Magick将png灰度图像从comand线转换为RGB

如何解决《如何使用图像Magick将png灰度图像从comand线转换为RGB》经验，为你挑选了1个好方法。 ... [详细]
程序员
R：分组表中缺少级别的零填充

如何解决《R：分组表中缺少级别的零填充》经验，为你挑选了1个好方法。 ... [详细]
程序员
Android Studio添加图片

如何解决《AndroidStudio添加图片》经验，为你挑选了1个好方法。 ... [详细]

LEEstarmmmmm

这个屌丝很懒，什么也没留下！

关注作者

Tags | 热门标签

RankList | 热门文章