javascript检测浏览器的缩放状态实现代码
这里所说的缩放不是指浏览器大小的缩放，而是指浏览器网页内容的百分比缩放（按Ctrl和+号键或者-号键的缩放）。
检测这种缩放有很种方法，QQ空间都通过flash来检测浏览器是否处于缩放。这里提供javascript的方法来检测浏览器的缩放。
对于IE6，就直接无视了，因为IE6只能对文本进行缩放。
先来说说浏览器提供的标准检测接口，window.devicePixelRatio是设备上物理像素和设备独立像素的比例，该属性就可以用于检测网页是否被缩放了。在普通的PC浏览器上，在默认无缩放的情况下其默认值是1。目前Firefox、chrome等都得到了很好的支持。
好吧，接下来该说说IE的处理方法了。IE提供了window.screen.deviceXDPI和window.screen.logicalXDPI两个属性，deviceXDPI就是对应的设备上的物理像素，而logicalXDPI就是对应了设备独立像素的比例。估计标准的检测接口也只是基于IE这种方法的一种改进。这两个属性在windowsXP+以上的系统上的默认值都是96，因为系统默认的就是96dpi。
对于以上两种都不支持的浏览器，还可以利用window.outerWidth和window.innerWidth这两个属性。outerWidth返回的是窗口元素的外部实际宽度，innerWidth返回的是窗口元素的内部实际宽度，这两个宽度都包含了滚动条在内的宽度。
有了这些属性基本就可以搞定PC浏览器上常见的浏览器了。实现代码如下：
detectZoom函数的返回值如果是100就是默认缩放级别，大于100则是放大了，小于100则是缩小了。
functiondetectZoom(){
varratio=0,
screen=window.screen,
ua=navigator.userAgent.toLowerCase();
if(window.devicePixelRatio!==undefined){
ratio=window.devicePixelRatio;
}
elseif(~ua.indexOf('msie')){
if(screen.deviceXDPI&&screen.logicalXDPI){
ratio=screen.deviceXDPI/screen.logicalXDPI;
}
}
elseif(window.outerWidth!==undefined&&window.innerWidth!==undefined){
ratio=window.outerWidth/window.innerWidth;
}
if(ratio){
ratio=Math.round(ratio*100);
}
returnratio;
};
原创文章，转载请注明：转载自前端开发