javascript检测浏览器的缩放状态实现代码


Posted in Javascript onSeptember 28, 2014

这里所说的缩放不是指浏览器大小的缩放,而是指浏览器网页内容的百分比缩放(按Ctrl和+号键或者-号键的缩放)。
检测这种缩放有很种方法,QQ空间都通过flash来检测浏览器是否处于缩放。这里提供javascript的方法来检测浏览器的缩放。
对于 IE6,就直接无视了,因为 IE6 只能对文本进行缩放。
先来说说浏览器提供的标准检测接口,window.devicePixelRatio 是设备上物理像素和设备独立像素的比例,该属性就可以用于检测网页是否被缩放了。在普通的 PC 浏览器上,在默认无缩放的情况下其默认值是 1。目前Firefox、chrome等都得到了很好的支持。
好吧,接下来该说说 IE 的处理方法了。IE 提供了 window.screen.deviceXDPI 和 window.screen.logicalXDPI 两个属性,deviceXDPI 就是对应的设备上的物理像素,而 logicalXDPI 就是对应了设备独立像素的比例。估计标准的检测接口也只是基于 IE 这种方法的一种改进。这两个属性在 windows XP+ 以上的系统上的默认值都是 96,因为系统默认的就是 96dpi 。
对于以上两种都不支持的浏览器,还可以利用window.outerWidth 和 window.innerWidth 这两个属性。outerWidth 返回的是窗口元素的外部实际宽度,innerWidth 返回的是窗口元素的内部实际宽度,这两个宽度都包含了滚动条在内的宽度。
有了这些属性基本就可以搞定 PC 浏览器上常见的浏览器了。实现代码如下:

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

function detectZoom (){ 
  var ratio = 0,
    screen = window.screen,
    ua = navigator.userAgent.toLowerCase();

   if (window.devicePixelRatio !== undefined) {
      ratio = window.devicePixelRatio;
  }
  else if (~ua.indexOf('msie')) {  
    if (screen.deviceXDPI && screen.logicalXDPI) {
      ratio = screen.deviceXDPI / screen.logicalXDPI;
    }
  }
  else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
    ratio = window.outerWidth / window.innerWidth;
  }
  
   if (ratio){
    ratio = Math.round(ratio * 100);
  }
  
   return ratio;
};

原创文章,转载请注明: 转载自前端开发

Javascript 相关文章推荐
浅析js封装和作用域
Jul 09 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
深入浅析react native es6语法
Dec 09 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
Dec 12 Javascript
js+html5实现canvas绘制网页时钟的方法
May 21 Javascript
Yarn的安装与使用详细介绍
Oct 25 Javascript
JS实现汉字与Unicode码相互转换的方法详解
Apr 28 Javascript
vue的mixins属性详解
Mar 14 Javascript
重学JS 系列:聊聊继承(推荐)
Apr 11 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
Feb 11 Javascript
vue中配置scss全局变量的步骤
Dec 28 Vue.js
浅谈JS的二进制家族
May 09 Javascript
Node.js中使用mongoskin操作mongoDB实例
Sep 28 #Javascript
js使用for循环与innerHTML获取选中tr下td值
Sep 26 #Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Sep 26 #Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 #Javascript
jquery uploadify 在FF下无效的解决办法
Sep 26 #Javascript
jQuery判断当前点击的是第几个li的代码
Sep 26 #Javascript
javascript 自定义回调函数示例代码
Sep 26 #Javascript
You might like
oracle资料库函式库
2006/10/09 PHP
ThinkPHP让分页保持搜索状态的方法
2014/07/02 PHP
Zend Framework教程之配置文件application.ini解析
2016/03/10 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
页面版文本框智能提示JS代码
2009/11/20 Javascript
jquery动态添加option示例
2013/12/30 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
快速学习JavaScript的6个思维技巧
2015/10/13 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
2015/10/25 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
通俗易懂地解释JS中的闭包
2017/10/23 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
jQuery弹框插件使用方法详解
2020/05/26 jQuery
javascript+Canvas实现画板功能
2020/06/23 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
Python 多线程抓取图片效率对比
2016/02/27 Python
Python学习思维导图(必看篇)
2017/06/26 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
python中如何使用分步式进程计算详解
2019/03/22 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
html5 svg 中元素点击事件添加方法
2013/01/16 HTML / CSS
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
Ado与Ado.net的相同与不同
2014/12/08 面试题
Linux文件操作命令都有哪些
2015/02/27 面试题
初中地理教学反思
2014/01/11 职场文书
经销商会议欢迎词
2014/01/11 职场文书
电视购物广告词
2014/03/19 职场文书
拉歌口号大全
2014/06/13 职场文书
公司催款律师函
2015/05/27 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
导游词之大雁塔景区
2019/09/17 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS
漫画「你在春天醒来」第10卷封面公开
2022/03/21 日漫
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB