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实例教程(19) 使用HoTMetal(5)
Dec 23 Javascript
javascript 循环读取JSON数据的代码
Jul 17 Javascript
使用CSS样式position:fixed水平滚动的方法
Feb 19 Javascript
AngularJS表单编辑提交功能实例
Feb 13 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
Mar 20 Javascript
jQuery中的基本选择器用法学习教程
Apr 14 Javascript
jquery事件绑定解绑机制源码解析
Sep 19 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
Oct 19 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
Dec 09 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 Javascript
基于javascript的无缝滚动动画1
Aug 07 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 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
smarty模板中拼接字符串的方法
2014/02/14 PHP
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
浅析PHP中call user func()函数及如何使用call user func调用自定义函数
2015/11/05 PHP
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
JavaScript window.setTimeout() 的详细用法
2009/11/04 Javascript
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
jQuery常用知识点总结以及平时封装常用函数
2016/02/23 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
Angularjs单选改为多选的开发过程及问题解析
2017/02/17 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
详解NodeJs项目 CentOs linux服务器线上部署
2019/09/16 NodeJs
微信js-sdk 录音功能的示例代码
2019/11/01 Javascript
JavaScript eval()函数定义及使用方法详解
2020/07/07 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
2020/08/13 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python snownlp情感分析简易demo(分享)
2017/06/04 Python
python中的二维列表实例详解
2018/06/19 Python
使用python 打开文件并做匹配处理的实例
2019/01/02 Python
python2使用bs4爬取腾讯社招过程解析
2019/08/14 Python
python中sort和sorted排序的实例方法
2019/08/26 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
英国最大的百货公司:Harrods
2016/08/18 全球购物
Athleta官网:购买女士瑜伽服、技术运动服和休闲运动服
2020/11/12 全球购物
自我评价范文分享
2014/01/04 职场文书
我的中国心演讲稿
2014/09/04 职场文书
2015年春节标语口号
2014/12/09 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书
一文搞懂redux在react中的初步用法
2021/06/09 Javascript
详解redis在微服务领域的贡献
2021/10/16 Redis
vue动态绑定style样式
2022/04/20 Vue.js