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 相关文章推荐
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
jQuery解决input超多的表单提交
Aug 10 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 Javascript
JS库之wow.js使用方法
Sep 14 Javascript
基于JavaScript中字符串的match与replace方法(详解)
Dec 04 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 Javascript
JS制作简易计算器的实例代码
Jul 04 Javascript
基于react项目打包css引用路径错误解决方案
Oct 28 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
yii框架表单模型使用及以数组形式提交表单数据示例
2014/04/30 PHP
php中常见的sql攻击正则表达式汇总
2014/11/06 PHP
javascript真的不难-回顾一下基础知识
2013/01/15 Javascript
jQuery实现可拖动的浮动层完整代码
2013/05/27 Javascript
javascript中var的重要性分析
2015/02/11 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
2016/04/26 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
2016/10/30 Javascript
Vue.directive自定义指令的使用详解
2017/03/10 Javascript
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
node.js基础知识汇总
2020/08/25 Javascript
[02:51]DOTA2英雄基础教程 艾欧
2014/01/13 DOTA
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
简单了解什么是神经网络
2017/12/23 Python
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
Python常用模块之requests模块用法分析
2019/05/15 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
python实现堆排序的实例讲解
2020/02/21 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
Python3 webservice接口测试代码详解
2020/06/23 Python
阿迪达斯芬兰官方网站:adidas芬兰
2017/01/30 全球购物
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
澳大利亚购买太阳镜和眼镜网站:Glamoureyes
2020/09/22 全球购物
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
新闻专业学生的自我评价
2014/02/13 职场文书
个人廉洁自律承诺书
2014/03/27 职场文书
公司市场专员岗位职责
2014/06/29 职场文书
预备党员介绍人意见
2015/06/01 职场文书
golang三种设计模式之简单工厂、方法工厂和抽象工厂
2022/04/10 Golang
HTML5页面打开微信小程序功能实现
2022/09/23 HTML / CSS