判断浏览器是否缩放

Hello，新年好啊，新年第一篇，并没有写最近学习的python，那个过几天整理一些出来，今天分享的一个小demo

就是如何判断浏览器是否是缩放模式并且兼容IE

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

$.extend({ winZoom:function(){ var ratio = 0, screen = window.screen,//有关用户屏幕的信息 ua = navigator.userAgent.toLowerCase();//声明了浏览器用于 HTTP 请求的用户代理头的值 if( ~ua.indexOf('firefox') ){//火狐浏览器 if( window.devicePixelRatio !== undefined ){ ratio = window.devicePixelRatio;//获取设备像素比 } } else if( ~ua.indexOf('msie') ){//IE浏览器 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 ); } // 360安全浏览器下的innerWidth包含了侧边栏的宽度 if( ratio !== 100 ){ if( ratio >= 95 && ratio <= 105 ){ ratio = 100; } } return ratio; }});

~ :if语句中的~号取反的意思，这个比较少用
screen.deviceXDPI :属性返回显示屏幕的每英寸水平点数。(可理解为innerWidth)
screen.logicalXDPI :属性返回显示屏幕每英寸的水平方向的常规点数。(可理解为outerWidth)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

//执行就不多说了 var zoomFn = function(){ var ratio = $.winZoom(); if( ratio < 100 || ratio > 100){ $(".tips-wrapper").html('<p class="alert alert-warning">浏览器处于缩放模式,为了你更好的浏览体验，请使用ctrl+0进行重置.</p>').show(); }else{ $(".tips-wrapper").html("").hide(); } }; $(window).resize(function(){ zoomFn(); }); zoomFn();

祝福大家在新的一年里快速成长，早日步入BAT(ˉ▽￣～)