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 相关文章推荐
JavaScript Event学习第二章 Event浏览器兼容性
Feb 07 Javascript
JS函数验证总结(方便js客户端输入验证)
Oct 29 Javascript
JavaScript四种调用模式和this示例介绍
Jan 02 Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 Javascript
jQuery子窗体取得父窗体元素的方法
May 11 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
Dec 20 Javascript
SpringMVC简单整合Angular2的示例
Jul 31 Javascript
关于angularJs清除浏览器缓存的方法
Nov 28 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
Sep 06 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
Apr 10 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
用PHP生成静态HTML速度快类库
2007/03/18 PHP
php目录管理函数小结
2008/09/10 PHP
深入php常用函数的使用汇总
2013/06/08 PHP
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
javascript 冒号 使用说明
2009/06/06 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
跟我学习javascript的作用域与作用域链
2015/11/19 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
HTML的select控件美化
2017/03/27 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
2017/12/13 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
2018/05/09 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
寻找网站后台地址的python脚本
2014/09/01 Python
python发送邮件实例分享
2017/07/28 Python
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
python实现堆排序的实例讲解
2020/02/21 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
Html5页面获取微信公众号的openid的方法
2020/05/12 HTML / CSS
阿联酋团购网站:Groupon阿联酋
2016/10/14 全球购物
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
货代行业个人求职简历的自我评价
2013/10/22 职场文书
高中毕业生个人自我鉴定
2013/11/24 职场文书
市场营销专业个人求职信范文
2013/12/14 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
学习雷锋主题班会
2015/08/14 职场文书
小学信息技术教学反思
2016/02/16 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书
在项目中使用redis做缓存的一些思路
2021/09/14 Redis