当前位置:首页 > IT技术

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

时间:2019-08-04 09:11:10来源:IT技术作者:SEO探针小编阅读:85次「手机版」
 

浏览器处于缩小状态怎么办

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

相关阅读

切换浏览器页面快捷键

在使用win10过程中,不同软件的窗口经常习惯性的使用alt + tab切换,但是在编程的时候有时候需要打开很多网页进行查看,用鼠标又太麻烦

淘宝刷信誉用什么浏览器?怎么刷?

最近SEO探针小编遇见了许多刚刚在网上开店的新朋友,聊起了一些像淘宝刷钻、刷信誉、刷单等一些老生常谈的问题。新朋友问了一个

【个人亲测】2018最流行的浏览器排行榜前10

文章出处:https://www.51.la/news/detail?id=283&from=list人们总是希望他们的浏览器的速度可以达到最快,所以,一个好的浏览器应该可

Chrome浏览器清除页面js文件缓存的方法

Chrome浏览器清除页面js文件缓存 Chrome浏览器清除js缓存方法虽然简单,但有些人还是不太会,有些人会去设置里面清除有时候没有用,

斯巴达浏览器

斯巴达浏览器即Project Spartan浏览器,是微软于2015年推出的下一版Windows操作系统自带新浏览器。微软意图凭借这款新

分享到:

栏目导航

推荐阅读

热门阅读