检测浏览器当前的缩放等级(Detecting browser zoom level)

昨天，项目里碰到一个问题。

通过JS通过screen.width和screen.height获取屏幕分辨率的时候，会出现异常值。

比如1440*900的屏幕分辨率，有时候获取的值可能是宽度是1100多像素。

这个结果会影响之后的计算，所以，不得不解决。

我印象中没见过原生的获取浏览器缩放等级的函数。

召唤Google大神，搜索一下，果然木有原生方法 ，但是可以通过其他技巧获取，stackoverflow有讨论（stackoverflow好牛啊，大部分疑问都可以找到回答）。

stackoverflow的回答中提到了一篇博客，其中介绍两种检测缩放方法，简要概括下：

1、由于样式百分比的值并不会被缩放，所以可以利用一个百分比样式的块和一个固定宽度的块，检测两个块之间的间隔即可计算出缩放等级，可以看看演示；

2、利用flash可以设置为“不缩放”的特性，将flash设置为“不缩放”，获取flash中Stage.height和页面DOM中flash的Object对象的高度，比较两个高度值即可得出缩放等级。

考虑到项目的实际情况，我选用了第一种实现方式。

但是，这个方法还是有个小问题，就如stackoverflow里面的兄弟提到：There’s no way to tell if the page is zoomed if they load your page while zoomed.

麻烦啊，如果访问页面时已经默认设置了100%之外的其他缩放等级，那么使用上面的方法1检测也会杯具（个人感觉方法2是可以检测出初始化的缩放等级，没验证哦亲）。

郁闷之际，想起之前试用iCloud的时候，我将浏览器的默认缩放等级设置为110%，打开iCloud的时候会提示“不支持的缩放比例”。

赶紧打开iCloud，根据印象中的提示文字找出i18n对应的字段名（ZoomLevel），然后根据i18n的字段名（ZoomLevel），在iCloud的主文件中搜索。但是由于iCloud的主JS文件太庞大（压缩后都有1.4M），直接搜索会导致文本编辑器卡死。赶紧搜索了JS美化工具，将压缩后的JS恢复回多行。

再搜索ZoomLevel，然后从中扒出来的检测页面是否已经缩放的函数，即是代码已被压缩过，但是我们依旧能看出，代码中利用了webkit的window.devicePixelRatio属性和IE核心的screen.deviceXDPI、screen.logicalXDPI属性来计算，检测是否已经缩放。

isZoomed:function() {
var c=NO,a=1;
if(SC.browser.webkit) {
if(window.devicePixelRatio) {
a=window.devicePixelRatio
}
var b=(window.outerWidth*a-8)/window.innerWidth;
if(b1.1) {
c=YES
}
}else{
if(SC.browser.msie&&(screen.deviceXDPI/screen.logicalXDPI)!==1) {
c=YES
}
}
return c
}