JQuery 检测浏览器放大缩小

最新推荐文章于 2024-08-21 02:18:31 发布

suixi2011

最新推荐文章于 2024-08-21 02:18:31 发布

阅读量5.5k

点赞数 1

分类专栏： Js/Jquery

本文链接：https://blog.csdn.net/suixi2011/article/details/51066757

版权

Js/Jquery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

</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:;" οnclick="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;
}