判断浏览器是否缩放。
//调用 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.