EonerCMS——做一个仿桌面系统的CMS（十三）

判断浏览器是否缩放

　　这是一个困扰我一周的问题了，不过现在终于在@Mr.L的协助下解决了，下面先描述下问题吧。大家在浏览QQ空间的时候，通过浏览器，或者按住ctrl+鼠标滚轮进行页面缩放，页面上会有个很友好的提示，如：

　　开始，我以为是通过判断窗口宽高，但发现缩放后的宽高和原先的宽高是一样的。失败。

　　然后，通过别人提供的资料《How to detect page zoom level in all modern browsers?》，发现如果高度定死，缩放后获取的高度是不变的，所以高度必须让他自适应，这样获取的高度是实际高度。之后的操作就简单了，domReady后，记录当前高度，当缩放时，也就是在窗口resize事件里比较当前高度和初始高度，判断浏览器是缩小还是放大。但最后测试后发现，这个方法有个小缺陷，就是当缩放的比例较小的情况下，实际高度是不准确的，容易出现我明明是缩放，但高度反而增加的情况。失败。

　　然后，我继续分析，是否可以通过font-size来判断，操作流程和上面那个类似，先记录，缩放后进行比较，chrome测试通过，ie测试不通过，ff测试不通过。失败。

　　最后，实在没解决思路了，打算看QQ空间的源码，很幸运，js没加密。看了源码后才豁然开朗，原来它是用一个zoom.swf文件来判断的，js只是进行操作。

　　实现步骤如下，先把zoom.swf引用到页面上

<object data="zoom.swf?onchange=onZoomChange" width="10" height="10" id="zoom" name="zoom_detect" type="application/x-shockwave-flash">
	<param name="allowScriptAccess" value="always">
	<param name="wmode" value="transparent">
	<param name="scale" value="noScale">
</object>

　　js代码如下

var level = 1;
var onZoomChange = function(o){
	var s = o.scale,
	m = s > 1 ? '放大': '缩小';
	if(s != 1){
		level = s;
		$('p').append(m);
	}else{
		if (s != level) {
			$('p').html("");
		}
	}
}

　　onZoomChange方法里有个o.scale，这个scale参数是通过zoom.swf返回回来的，通过判断这个是否大于1来知道是放大还是缩小。

　　运行demo，整个世界都清净了。

　　demo下载（chrome下本地测试不了，必须放服务器上）：下载地址

　　在线测试地址：http://hoorayos.com/demo/