zoukankan      html  css  js  c++  java
  • javascript检测浏览器的缩放状态实现代码 是指浏览器网页内容的百分比缩放(按Ctrl和+号键或者-号键的缩放)

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

      

     
    方法二:
    var obj = {'window.devicePixelRatio':window.devicePixelRatio,'screen.deviceXDPI / screen.logicalXDPI':screen.deviceXDPI / screen.logicalXDPI,
    		
               'window.outerWidth / window.innerWidth':window.outerWidth / window.innerWidth,
               'document.documentElement.offsetHeight / window.innerHeight':document.documentElement.offsetHeight / window.innerHeight,
    		
               'window.top.outerWidth / window.top.innerWidth':window.top.outerWidth / window.top.innerWidth}
                           
            function print(obj){
              var s = '';
              for(var key in obj){
                s+=key;
                s+=' : ';
                s+=obj[key];
                s+='
    
    '
              }
              document.write(s)
              
            }
    print(obj)
    

      

  • 相关阅读:
    Inno Setup入门(十三)——Pascal脚本(2)
    Inno Setup入门(十二)——Pascal脚本(1)
    Inno Setup入门(十一)——完成安装后执行某些程序
    Inno Setup入门(一)——最简单的安装脚本
    用现代化的方式开发一个图片上传工具
    现在就可以使用的5个 ES6 特性
    PhantomJS 基础及示例
    jquery获取css颜色值返回RGB应用
    Javascript常见设计模式解析
    更合理的 setState()
  • 原文地址:https://www.cnblogs.com/dearxinli/p/6902368.html
Copyright © 2011-2022 走看看