EonerCMS——做一个仿桌面系统的CMS(十三)

时间:2022-09-19 15:47:24

判断浏览器是否缩放

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

EonerCMS——做一个仿桌面系统的CMS(十三)

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

  然后,通过别人提供的资料《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/

EonerCMS——做一个仿桌面系统的CMS(十三)