iTakeo

判断浏览器是否缩放。

判断浏览器是否缩放。

//调用  
pageZoom.start(function(n){  
    //n为当前屏幕缩放比例  
});  
  
//停止  
pageZoom.stop();
01.
02.
03.
04.
05.
06.
07.

为了减少js的体积,这里没有把提示的div结构写进JS里面,而是用回调的函数返回当前缩放比例,根据缩放比例来自己设置提示。

下面是源码:

;(function(){  
    window.pageZoom = {  
        timer : null,  
        //开始监控浏览器状态,没800毫秒执行一次  
        start : function(fn){  
            var t = this;  
            t.timer = setInterval(function(){  
                fn(t.control());  
            },800);  
        },  
        //停止监控  
        stop : function(){  
            clearInterval(this.timer)  
        },  
        //判断状态  
        control : function(){  
            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;  
        }  
    };   
})();
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.

注意看控制台提示:

pageZoom.start(function(n){  
    console.log('当前浏览器状态为'+ (n==100 ? '正常' : (n/100>1 ? '放大' : '缩小') )+',缩小比例为'+n+'%');  
}); 
01.
02.
03.

或者做一个弹层来提示一下:

pageZoom.start(function(n){    
    if(n!=100){    
        var tip = document.createElement('div');    
        tip.innerHTML = '当前浏览器状态为'+(n/100>1 ? '放大' : '缩小')+',缩放比例为:'+n;    
        document.body.appendChild(tip);    
    }else{    
        document.body.removeChild(XXXXX);  
        //停止监控  
        pageZoom.stop();  
    };    
}); 
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.


2015/09/09 0 / /
标签:  暂无标签

验证码: 3 + 1 =

回到顶部