浏览器缩放的检测(转)

很多 WEB 开发者可能都会碰到这种头痛的问题，就是当用户对页面进行缩小或放大时，原本好好的布局就被破坏了。如果让网页支持自适应的缩小和放大布局，对于开发者来说是一个不小的挑战。

在我看来如果用户有意识的去对网页进行缩放，那么就应该知道缩放会破坏布局。还有很多用户其实压根不知道自己是何时对网页进行了缩放，此时就需要提醒用户应该将浏览器的缩放级别重置成默认的比例。

说到浏览器的缩放检测，可能有好几种方法都可以实现，从检测 CSS 样式到检测 Flash 的尺寸，可以说是各显神通，但我都觉得有点麻烦。其实还有更简便的方法的，当然各个浏览器的检测方法又有不同，对于 IE6，就直接无视了，因为 IE6 只能对文本进行缩放。

先来说说浏览器提供的标准检测接口，window.devicePixelRatio 是设备上物理像素和设备独立像素的比例，该属性就可以用于检测网页是否被缩放了。在普通的 PC 浏览器上，在默认无缩放的情况下其默认值是 1。可惜这么方便的属性目前只有 Firefox 支持。

好吧，接下来该说说 IE 的处理方法了。IE 提供了 window.screen.deviceXDPI 和 window.screen.logicalXDPI 两个属性，deviceXDPI 就是对应的设备上的物理像素，而 logicalXDPI 就是对应了设备独立像素的比例。估计标准的检测接口也只是基于 IE 这种方法的一种改进。这两个属性在 windows XP+ 以上的系统上的默认值都是 96，因为系统默认的就是 96dpi 。

对于 webkit 和 opera，它们都支持 window.outerWidth 和 window.innerWidth 这两个属性。outerWidth 返回的是窗口元素的外部实际宽度，innerWidth 返回的是窗口元素的内部实际宽度，这两个宽度都包含了滚动条在内的宽度。

有了这些属性基本就可以搞定 PC 浏览器上常见的浏览器了。实现代码如下：

view source

print?

01	var detectZoom = function(){

02	var ratio = 0,

03	screen = window.screen,

04	ua = navigator.userAgent.toLowerCase();

05

06	if( ~ua.indexOf('firefox') ){

07	if( window.devicePixelRatio !== undefined ){

08	ratio = window.devicePixelRatio;

09

}

10

}

11	else if( ~ua.indexOf('msie') ){

12	if( screen.deviceXDPI && screen.logicalXDPI ){

13	ratio = screen.deviceXDPI / screen.logicalXDPI;

14

}

15

}

16	else if( window.outerWidth !== undefined && window.innerWidth !== undefined ){

17	ratio = window.outerWidth / window.innerWidth;

18

}

19

20	if( ratio ){

21	ratio = Math.round( ratio * 100 );

22

}

23

24	// 360安全浏览器下浏览器最大化时诡异的outerWidth和innerWidth不相等

25	if( ratio === 99 || ratio === 101 ){

26	ratio = 100;

27

}

28

29	return ratio;

30

};

detectZoom 函数的返回值如果是 100 就是默认缩放级别，大于 100 则是放大了，小于 100 则是缩小了。

查看演示

原载于：雨夜带刀’s Blog
本文链接：http://stylechen.com/detectzoom.html
如需转载请以链接形式注明原载或原文地址。