您的位置:首页 > Web前端 > JQuery

JQuery 检测浏览器放大缩小

2016-04-05 18:03 639 查看
</pre><p>参考其他人的JS方法后整理的</p><p></p><p>调用方法</p><pre code_snippet_id="1635319" snippet_file_name="blog_20160405_2_620393" name="code" class="html"><span style="white-space:pre">	</span>detectZoom($($("body").children().get(0)));
$(document).keydown(function(e){
if( (e.ctrlKey  == true && e.keyCode == 48) || (e.ctrlKey  == true && e.keyCode == 96) ){
deleteHintbar();
}
});


实现方法

function detectZoom (event){
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);
}
if(ratio!=100){
var html = '<div class="gb-hintbar" id="gb-hintbar">	<div class="inner">		<div class="hintbar-txt">您的浏览器目前处于<span id="hintbar-txt">缩放</span>状态,会导致页面显示不正常,您可以键盘按"ctrl+数字0"组合键恢复初始状态。</div>	</div>	<a title="点击退出" id="deleteHintbar" class="text-close" href="javascript:;" onclick="deleteHintbar()">×</a></div>';
event.before(html);
}

};

function deleteHintbar(){
$("#gb-hintbar").empty();
}


css 样式
.gb-hintbar {
background: #fff2d1 none repeat scroll 0 0;
color: #a0441d;
font-size: 14px;
overflow: hidden;
position: relative;
z-index:99999;
}
.gb-hintbar .inner {
height: 39px;
margin: 0 auto;
/*  padding: 21px 0 0 40px; */
padding: 11px 0 10px 40px;
width: 902px;
}
.gb-hintbar .inner a {
text-decoration: underline;
}
.gb-hintbar .text-close {
color: #a0441d;
position: absolute;
right: 10px;
text-decoration: none;
top: 8px;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: