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

这里所说的缩放不是指浏览器大小的缩放，而是指浏览器网页内容的百分比缩放（按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;
};

原创文章，转载请注明： 转载自前端开发

赞 (0)

相关推荐

  • javascript检测对象中是否存在某个属性判断方法小结

    检测对象中属性的存在与否可以通过几种方法来判断. 1.使用in关键字该方法可以判断对象的自有属性和继承来的属性是否存在. 复制代码 代码如下: var o={x:1}; "x" in o; //true,自有属性存在 "y" in o; //false "toString" in o; //true,是一个继承属性 2.使用对象的hasOwnProperty()方法 该方法只能判断自有属性是否存在,对于继承属性会返回false. 复制代码 代码如

  • 使用js检测浏览器是否支持html5中的video标签的方法

    复制代码 代码如下: //检测是否支持HTML5function checkVideo() {    if (!!document.createElement('video').canPlayType) {        var vidTest = document.createElement("video");        oggTest = vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');  

  • JavaScript快速检测浏览器对CSS3特性的支持情况

    JavaScript快速检测浏览器对CSS3特性的支持情况

    在项目中需要快速检测浏览器是否支持某CSS3特性,比如检测是否支持"transform",然后我的布局会有两种完全不同的版式. 当然除开本文介绍的这种快速方法,还有一种更有名和更通用的方法,那就是modernizr,运行脚本之后它会在html的class上加上浏览器支持的所有特性的列表. 优点: js是可配置的,不需要的特性检测可以在配置脚本中去掉基于特性检测js库简单好用 除此之外还有一种不太好的方法,那就是判断浏览器的UA,不好的原因是UA可能会伪造,而且版本判断繁琐,还有不稳定.

  • js中有关IE版本检测

    js中有关IE版本检测

    见得最多的就是检测navigator.userAgent(这个可以面向所有浏览器,略过). 另外一种就是IE的条件注释,这篇有个比较详细的说明 http://www.jb51.net/article/29336.htm 复制代码 代码如下: <!--[if !IE]><!--> <script type="text/javascript"> alert('非IE') </ script> <!--<![endif]-->

  • 检测jQuery.js是否已加载的判断代码

    当然,该方法不局限于jQuery的检测,对与任何Javascript变量或函数都是通用的. 当前网页加载jQuery后,jQuery()或$()函数将会被定义,所以检测jQuery是否已经加载存在以下2种方法: 方法1: 复制代码 代码如下: if (jQuery) { // jQuery 已加载 } else { // jQuery 未加载 } 方法2: 复制代码 代码如下: if (typeof jQuery == 'undefined') { // jQuery 未加载 } else {

  • js:日期正则表达式及检测

    这是yyyy-mm-dd hh:mm:ss 的  /^(\d{4})\-(\d{2})\-(\d{2}) (\d{2}):(\d{2}):(\d{2})$/ ;  这是 yyyy-mm-ddde 的 /^(\d{4})\-(\d{2})\-(\d{2})$/ function validateCNDate( strValue ) { var objRegExp = /^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$/ if(!objRegExp.test(strValue))

  • javascript 检测浏览器类型和版本的代码

    检测浏览器及其版本的代码 复制代码 代码如下: getBrowser : function(){ var browser = { msie: false, firefox: false, opera: false, safari: false, chrome: false, netscape: false, appname: 'unknown', version: 0 }, userAgent = window.navigator.userAgent.toLowerCase(); if ( /(

  • Js检测判断URL网址输入是否正确

    检查是否为URL function check(){ str = form1.txt.value; str = str.match(/http:\/\/.+/); if (str == null){ alert('你输入的URL无效'); return false; }else{ alert("你输入的URL有效"); return true; } } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JavaScript检测上传文件大小的方法

    本文实例讲述了JavaScript检测上传文件大小的方法.分享给大家供大家参考.具体如下: 通过JS客户端代码限制用户上传文件的大小,但是客户端的验证只是辅助的,服务器端一定还要再做验证 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http

  • Javascript中常用的检测方法小结

    一.数组检测 1.使用ARRAY.ISARRAY() Array.isArray(obj) 例如: Array.isArray([]) //true Array.isArray({}) //false 兼容性: CHROME FIREFOX IE OPERA SAFARI 5 4.0(2.0) 9 10.5 5 可以使用以下方式,先检测是否支持Array.isArray. if(Array.isArray){ return Array.isArray(obj); } 2. 使用INSTANCEO

随机推荐