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

最新推荐文章于 2022-11-13 12:00:00 发布

CHCH998

最新推荐文章于 2022-11-13 12:00:00 发布

阅读量430

点赞数

文章标签： javascript browser zoom detection

原文链接：https://oldbug.net/q/7BpT/How-to-detect-page-zoom-level-in-all-modern-browsers

版权

本文翻译自：How to detect page zoom level in all modern browsers?

How can I detect the page zoom level in all modern browsers? 如何在所有现代浏览器中检测页面缩放级别？ While this thread tells how to do it in IE7 and IE8, I can't find a good cross-browser solution. 尽管此线程说明了如何在IE7和IE8中执行此操作，但我找不到很好的跨浏览器解决方案。
Firefox stores the page zoom level for future access. Firefox存储页面缩放级别以供将来访问。 On the first page load, would I be able to get the zoom level? 在首页加载时，我能否获得缩放级别？ Somewhere I read it works when a zoom change occurs after the page is loaded. 加载页面后发生缩放更改时，我在某处阅读过它可以工作。
Is there a way to trap the 'zoom' event? 有没有办法捕获'zoom'事件？

I need this because some of my calculations are pixel-based and they may fluctuate when zoomed. 我需要这样做，因为我的某些计算是基于像素的，并且缩放时它们可能会波动。

Modified sample given by @tfl @tfl给定的修改样本

This page alerts different height values when zoomed. 缩放时，此页面会提示不同的高度值。 [jsFiddle] [jsFiddle]

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"/></script>
    </head>
    <body>
        <div id="xy" style="border:1px solid #f00; width:100px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin tortor in lacus tincidunt volutpat. Integer dignissim imperdiet mollis. Suspendisse quis tortor velit, placerat tempor neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent bibendum auctor lorem vitae tempor. Nullam condimentum aliquam elementum. Nullam egestas gravida elementum. Maecenas mattis molestie nisl sit amet vehicula. Donec semper tristique blandit. Vestibulum adipiscing placerat mollis.</div>
        <button onclick="alert($('#xy').height());">Show</button>
    </body>
</html>

#1楼

参考：https://stackoom.com/question/7BpT/如何在所有现代浏览器中检测页面缩放级别

#2楼

This is question was posted like ages back, but today when i was looking for the same answer "How to detect zoom in and out event", i couldn't find one answer that would fit all the browsers. 这是一个很久以前发布的问题，但是今天，当我在寻找相同的答案“如何检测放大和缩小事件”时，找不到适合所有浏览器的答案。

As on now : For Firefox/Chrome/IE8 and IE9 , the zoom in and out fires a window.resize event. 截至目前：对于Firefox / Chrome / IE8和IE9，放大和缩小触发window.resize事件。 This can be captured using: 可以使用以下方法捕获：

$(window).resize(function() {
//YOUR CODE.
});

#3楼

This has worked great for me in webkit-based browsers (Chrome, Safari): 在基于Webkit的浏览器（Chrome，Safari）中，这对我非常有用：

function isZoomed() {
    var width, mediaQuery;

    width = document.body.clientWidth;
    mediaQuery = '(max-width: ' + width + 'px) and (min-width: ' + width + 'px)';

    return !window.matchMedia(mediaQuery).matches;
}

Doesn't seem to work in Firefox though. 似乎在Firefox中似乎不起作用。

This also works in WebKit: 在WebKit中也可以使用：

var zoomLevel = document.width / document.body.clientWidth;

#4楼

My coworker and I used the script from https://github.com/tombigel/detect-zoom . 我和我的同事使用了https://github.com/tombigel/detect-zoom中的脚本。 In addition, we also dynamically created a svg element and check its currentScale property. 此外，我们还动态创建了一个svg元素并检查其currentScale属性。 It works great on Chrome and likely most browsers too. 它在Chrome以及大多数浏览器上都可以正常运行。 On FF the "zoom text only" feature has to be turned off though. 但是，在FF上，必须关闭“仅缩放文本”功能。 SVG is supported on most browsers. 大多数浏览器都支持 SVG。 At the time of this writing, tested on IE10, FF19 and Chrome28. 在撰写本文时，已在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);

#5楼

This is for Chrome , in the wake of user800583 answer ... 这是针对Chrome的 ， 紧随user800583之后 ...

I spent a few hours on this problem and have not found a better approach, but : 我花了几个小时解决这个问题，但找不到更好的方法，但是：

There are 16 'zoomLevel' and not 10 有16个“ zoomLevel”而不是10
When Chrome is fullscreen/maximized the ratio is window.outerWidth/window.innerWidth , and when it is not, the ratio seems to be (window.outerWidth-16)/window.innerWidth , however the 1st case can be approached by the 2nd one. 当Chrome为全屏/最大化时，该比例为window.outerWidth/window.innerWidth ，否则，该比例似乎为(window.outerWidth-16)/window.innerWidth ，但是(window.outerWidth-16)/window.innerWidth情况可以接近第一种情况一。

So I came to the following ... 所以我来以下...

But this approach has limitations : for example if you play the accordion with the application window (rapidly enlarge and reduce the width of the window) then you will get gaps between zoom levels although the zoom has not changed (may be outerWidth and innerWidth are not exactly updated in the same time). 但是这种方法有局限性：例如，如果您在应用程序窗口中播放手风琴（迅速放大和缩小窗口的宽度），则尽管缩放比例没有变化（可能不是externalWidth和innerWidth都没有改变），但缩放级别之间还是会有差距完全在同一时间更新）。

var snap = function (r, snaps)
{
    var i;
    for (i=0; i < 16; i++) { if ( r < snaps[i] ) return i; }
};
var w, l, r;
w = window.outerWidth, l = window.innerWidth;
return snap((w - 16) / l,
            [ 0.29, 0.42, 0.58, 0.71, 0.83, 0.95, 1.05, 1.18, 1.38, 1.63, 1.88, 2.25, 2.75, 3.5, 4.5, 100 ],
);

And if you want the factor : 并且如果您想要因素：

var snap = function (r, snaps, ratios)
{
    var i;
    for (i=0; i < 16; i++) { if ( r < snaps[i] ) return eval(ratios[i]); }
};
var w, l, r;
w = window.outerWidth, l = window.innerWidth;
return snap((w - 16) / l,
            [ 0.29, 0.42, 0.58, 0.71, 0.83, 0.95, 1.05, 1.18, 1.38, 1.63, 1.88, 2.25, 2.75, 3.5, 4.5, 100 ],
            [ 0.25, '1/3', 0.5, '2/3', 0.75, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2, 2.5, 3, 4, 5 ]
);

#6楼

What i came up with is : 我想出的是：

1) Make a position:fixed <div> with width:100% ( id=zoomdiv ) 1）制作一个position:fixed <div> ， width:100% （ id = zoomdiv ）

2) when the page loads : 2）页面加载时：

zoomlevel=$("#zoomdiv").width()*1.0 / screen.availWidth

And it worked for me for ctrl+ and ctrl- zooms. 它对我来说适用于ctrl+和ctrl-缩放。

or i can add the line to a $(window).onresize() event to get the active zoom level 或者我可以将行添加到$(window).onresize()事件中以获取活动的缩放级别

Code: 码：

<script>
    var zoom=$("#zoomdiv").width()*1.0 / screen.availWidth;

    $(window).resize(function(){
        zoom=$("#zoomdiv").width()*1.0 / screen.availWidth;
        alert(zoom);    
    });
</script>
<body>
    <div id=zoomdiv style="width:100%;position:fixed;"></div>
</body>

PS : this is my first post, pardon any mistakes PS：这是我的第一篇文章，对不起任何错误

CHCH998

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何在所有现代浏览器中检测页面缩放级别？

How can I detect the page zoom level in all modern browsers? 如何在所有现代浏览器中检测页面缩放级别？ While this thre
复制链接

扫一扫