博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
EonerCMS——做一个仿桌面系统的CMS(十三)
阅读量:5995 次
发布时间:2019-06-20

本文共 875 字,大约阅读时间需要 2 分钟。

判断浏览器是否缩放

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

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

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

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

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

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

			

  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://oiqlx.baihongyu.com/

你可能感兴趣的文章
Chef宣布100%开源,要走红帽模式?\n
查看>>
实验进行中:.NET WebAssembly支持
查看>>
白话中台战略:中台是个什么鬼?
查看>>
使用服务网格提高安全性:Christian Posta带你探索Istio的新功能
查看>>
写给服务器端Java开发人员的Kotlin简介
查看>>
Eclipse发布MicroProfile 1.4和2.0
查看>>
如何用敏捷消除项目风险?
查看>>
Istio:一个用于微服务间通信的服务网格开源项目
查看>>
在首次发布三周之后,MLflow迎来了0.2版本
查看>>
为什么已有Elasticsearch,我们还要重造实时分析引擎AresDB?
查看>>
探寻腾讯金融数据库TDSQL的十年之路
查看>>
Rust官方公布Rust1.0最新状态报告和最终时间表
查看>>
Facebook使用机器学习手段来自动优化其系统性能
查看>>
使用敏捷回顾实施组织变革
查看>>
语义鸿沟、异构鸿沟、数据缺失,多模态技术如何跨过这些坎?
查看>>
io.js 1.0.x发布
查看>>
GitHub Octoverse 2018调查要点
查看>>
有赞电商云应用框架设计
查看>>
1100名达摩院“扫地僧”加持,阿里云的下一个十年
查看>>
力荐50个最实用的免费机器学习数据集
查看>>