判断浏览器是否缩放


浏览器

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(ˉ▽ ̄~)

|