如何检测页面缩放级别在所有现代浏览器？ [英] How to detect page zoom level in all modern browsers?

问题描述

1. 我怎么能检测所有现代浏览器的页面缩放级别？虽然这<一个href=\"http://stackoverflow.com/questions/680596/how-to-get-zoom-level-in-internet-explorer-7-javascript\">thread告诉你如何做它在IE7和IE8，我无法找到一个很好的跨浏览器的解决方案。




2. 火狐商店为将来访问的页面缩放级别。在第一页上的负载，我就可以得到缩放级别？我曾读到时的之后的页面加载发生改变变焦它的工作原理。




3. 有没有办法套住缩放<​​/ code>事件？




我需要这个，因为我的一些计算是基于像素和缩放时，他们可能会波动。

---

修改由给定的样本@tfl

当放大这个页面的警报不同的高度值。 [的jsfiddle]

 ＆LT; HTML和GT;
    ＆LT; HEAD＆GT;
        ＆LT;脚本SRC =htt​​p://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js类型=文/ JavaScript的/＆GT;＆LT; / SCRIPT＆GT;
    ＆LT; /头＆GT;
    ＆LT;身体GT;
        ＆LT; D​​IV ID =XY的风格=边界：1px的固体＃F00;宽度：100像素;＆GT; Lorem存有悲坐阿梅德，consectetur adipiscing ELIT。 Pellentesque sollicitudin tortor在拉克丝tincidunt volutpat。整数dignissim imperdiet油树。 Suspendisse QUIS tortor velit，placerat tempor预期值，也。射精sociis natoque penatibus等magnis DIS临产蒙特斯，nascetur ridiculus亩。 Praesent必比登auctor LOREM简历tempor。 Nullam condimentum aliquam elementum。 Nullam egestas孕妇elementum。保护者马蒂斯molestie nisl坐阿梅德vehicula。 Donec森帕tristique blandit。前庭adipiscing placerat油树＆LT; / DIV＆GT;
        ＆LT;按钮的onclick =警报（$（'＃XY'）的高度（））;＆gt;显示＆LT; /按钮＆GT;
    ＆LT; /身体GT;
＆LT; / HTML＆GT;
 




解决方案

现在它是一个更大的混乱情况比第一次时，有人问这个问题。从阅读所有我能找到的反应和博客，这里有一个总结。我还设置了此页面来测试测量缩放级别所有这些方法。

修改（2011-12-12）：我补充说，可以克隆一个项目： https://github.com/tombigel/detect-zoom

• IE8 ： screen.deviceXDPI / screen.logicalXDPI （或相对缩放级别为默认缩放， screen.systemXDPI / screen.logicalXDPI ）


• IE7 ： VAR体= document.body的，R = body.getBoundingClientRect（）;回报（r.left-r.right）/body.offsetWidth; （感谢这个例子或<一个href=\"http://stackoverflow.com/questions/680596/how-to-get-zoom-level-in-internet-explorer-7-javascript/680747#680747\">this答案）


• FF3.5 ONLY ： screen.width /媒体查询屏幕宽度（见下文）（需要的事实，即 screen.width 使用设备像素，但MQ宽度使用CSS像素 - 感谢怪异模式宽度）


• FF3.6 ：没有已知的方法


• FF4 + ：媒体查询二进制搜索（见下文）


• 的WebKit ：衡量一个div的preferred大小 -webkit-文字大小调整：无


• 的WebKit ：（自 r72591 碎） document.width / jQuery的（文件）.WIDTH（）（感谢<一个href=\"http://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers/4135649#4135649\">Dirk面包车Oosterbosch以上）。为了获得比在设备像素方面（而不是相对于默认缩放），乘以 window.devicePixelRatio 。


• 老的WebKit （未验证）：<？code> parseInt函数（的getComputedStyle（document.documentElement中，NULL）.WIDTH）/ document.documentElement.clientWidth （从<一个href=\"http://stackoverflow.com/questions/4130649/detect-browser-zoom-level-using-javascript/4132694#4132694\">this答案）


• 歌剧： document.documentElement.offsetWidth / A 位置的宽度：固定;宽度：100％ DIV。 从这里（的怪异模式的宽度表说，这是一个错误; innerWidth应该是CSS像素）。我们使用的位置是：固定元素，以获得视口的宽度的包括那里的滚动条的空间; document.documentElement.clientWidth排除这个宽度。一段时间以来，2011年这被打破;我知道有没有办法让在Opera缩放级别了。


• 其他：<一href=\"http://blog.sebastian-martens.de/2009/12/how-to-detect-the-browser-zoom-level-change-browser-zoo/\">Flash塞巴斯蒂安解决方案


• 不可靠：听鼠标事件并测量clientX在screenX /变变

下面是火狐4二进制搜索，因为我不知道它暴露任何变量的：

 ＆LT;风格ID =二分查找＆GT;＆LT; /风格＆GT;
＆LT; D​​IV ID = dummyElement方式＆gt;虚拟元素测试媒体查询＆LT; / DIV＆GT;
＆LT;脚本＆GT;
VAR mediaQueryMatches =功能（财产，R）{
  VAR风格=的document.getElementById（'二分查找'）;
  变种dummyElement =的document.getElementById（'dummyElement'）;
  style.sheet.insertRule（'@媒体（'+物业+：+ R +
                         '）{#dummyElement'+
                         {文本装饰：下划线}}'，0）;
  无功相匹配的getComputedStyle =（dummyElement，NULL）.textDecoration
      =='底线';
  style.sheet.deleteRule（0）;
  返回匹配的;
};
VAR mediaQueryBinarySearch =功能（
    属性，单元，A，B，MAXITER，小量）{
  变种中期=（A + B）/ 2;
  如果（MAXITER == 0 || b  -  A＆LT;小量）返回中旬;
  如果（mediaQueryMatches（物业，中+单位））{
    返回mediaQueryBinarySearch（
        物业，单位，中，B，MAXITER-1，小量）;
  }其他{
    返回mediaQueryBinarySearch（
        物业，单位，一，中，MAXITER-1，小量）;
  }
};
VAR mozDevicePixelRatio = mediaQueryBinarySearch（
    最小 -  MOZ装置象素比'，''，A，B，MAXITER，小量）;
VAR ff35DevicePixelRatio = screen.width / mediaQueryBinarySearch（
    分设备宽度，PX，0，6000，25，0.0001）;
＆LT; / SCRIPT＆GT;
 

1. 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.

2. Firefox stores the page zoom level for future access. 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.

3. Is there a way to trap the 'zoom' event?

I need this because some of my calculations are pixel-based and they may fluctuate when zoomed.

---

Modified sample given by @tfl

This page alerts different height values when zoomed. [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>

解决方案

Now it's an even bigger mess than it was when this question was first asked. From reading all the responses and blog posts I could find, here's a summary. I also set up this page to test all these methods of measuring the zoom level.

Edit (2011-12-12): I've added a project that can be cloned: https://github.com/tombigel/detect-zoom

• IE8: screen.deviceXDPI / screen.logicalXDPI (or, for the zoom level relative to default zoom, screen.systemXDPI / screen.logicalXDPI)
• IE7: var body = document.body,r = body.getBoundingClientRect(); return (r.left-r.right)/body.offsetWidth; (thanks to this example or this answer)
• FF3.5 ONLY: screen.width / media query screen width (see below) (takes advantage of the fact that screen.width uses device pixels but MQ width uses CSS pixels--thanks to Quirksmode widths)
• FF3.6: no known method
• FF4+: media queries binary search (see below)
• WebKit: measure the preferred size of a div with -webkit-text-size-adjust:none.
• WebKit: (broken since r72591) document.width / jQuery(document).width() (thanks to Dirk van Oosterbosch above). To get ratio in terms of device pixels (instead of relative to default zoom), multiply by window.devicePixelRatio.
• Old WebKit? (unverified): parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth (from this answer)
• Opera: document.documentElement.offsetWidth / width of a position:fixed; width:100% div. from here (Quirksmode's widths table says it's a bug; innerWidth should be CSS px). We use the position:fixed element to get the width of the viewport including the space where the scrollbars are; document.documentElement.clientWidth excludes this width. This is broken since sometime in 2011; I know no way to get the zoom level in Opera anymore.
• Other: Flash solution from Sebastian
• Unreliable: listen to mouse events and measure change in screenX / change in clientX

Here's a binary search for Firefox 4, since I don't know of any variable where it is exposed:

<style id=binarysearch></style>
<div id=dummyElement>Dummy element to test media queries.</div>
<script>
var mediaQueryMatches = function(property, r) {
  var style = document.getElementById('binarysearch');
  var dummyElement = document.getElementById('dummyElement');
  style.sheet.insertRule('@media (' + property + ':' + r +
                         ') {#dummyElement ' +
                         '{text-decoration: underline} }', 0);
  var matched = getComputedStyle(dummyElement, null).textDecoration
      == 'underline';
  style.sheet.deleteRule(0);
  return matched;
};
var mediaQueryBinarySearch = function(
    property, unit, a, b, maxIter, epsilon) {
  var mid = (a + b)/2;
  if (maxIter == 0 || b - a < epsilon) return mid;
  if (mediaQueryMatches(property, mid + unit)) {
    return mediaQueryBinarySearch(
        property, unit, mid, b, maxIter-1, epsilon);
  } else {
    return mediaQueryBinarySearch(
        property, unit, a, mid, maxIter-1, epsilon);
  }
};
var mozDevicePixelRatio = mediaQueryBinarySearch(
    'min--moz-device-pixel-ratio', '', a, b, maxIter, epsilon);
var ff35DevicePixelRatio = screen.width / mediaQueryBinarySearch(
    'min-device-width', 'px', 0, 6000, 25, .0001);
</script>

这篇关于如何检测页面缩放级别在所有现代浏览器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！