浏览器尺寸判断（兼容标准及低版本ie浏览器）

1.总体思路：先判断浏览器类型，再根据不同浏览器类型用不同方法获取浏览器尺寸；

2.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>浏览器尺寸判断</title>
	</head>
	<body>
		
		<script src=" https://cdn.bootcss.com/jquery/1.8.3/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">

			var banben=IEVersion();
			
			console.log(banben);
			
			bb();

			function bb(){
				
				var docEl = document.documentElement;
				
				console.log(banben)
				
				if((banben=='edge')||(banben==11)||(banben==(-1))){
					//标准浏览器
					var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
						recalc = function() {
	
							yclientWidth = docEl.clientWidth;
							console.log(yclientWidth);
	
						};
						
						yclientWidth = docEl.clientWidth;
							console.log(yclientWidth);						
					window.addEventListener(resizeEvt, recalc,false);
					document.addEventListener('DOMContentLoaded', recalc, false);

				}else{
					//低版本ie浏览器	
					var resizeEvt = 'onresize',
					recalc = function() {
	
						yclientWidth = docEl.clientWidth;
						console.log(yclientWidth);
						console.log(document.body.clientWidth);
						console.log(2);
	
					};
					console.log(3);
					yclientWidth = docEl.clientWidth;
					console.log(yclientWidth);
					window.attachEvent(resizeEvt, recalc);
				}
				
			}
			
			//判断浏览器种类
			function IEVersion() {
	            var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串  	           
	            
	            var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器  
	            var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器  
	            var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
	            if(isIE) {
	                var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
	                reIE.test(userAgent);
	                var fIEVersion = parseFloat(RegExp["$1"]);
	                if(fIEVersion == 7) {
	                    return 7;
	                } else if(fIEVersion == 8) {
	                    return 8;
	                } else if(fIEVersion == 9) {
	                    return 9;
	                } else if(fIEVersion == 10) {
	                    return 10;
	                } else {
	                    return 6;//IE版本<=7
	                }   
	            } else if(isEdge) {
	                return 'edge';//edge
	            } else if(isIE11) {
	                return 11; //IE11  
	            }else{
	                return -1;//不是ie浏览器
	            }
	        }

		</script>
	</body>
</html>

3.效果

（1）Google

（2）火狐

（3）360兼容IE7

（4）360兼容IE8

（5）360兼容IE9

（6）360兼容IE10

（7）360兼容IE11

（8）360极速

4.几点说明：

（1）事件监听addEventListener在低版本的IE会存在兼容问题，低版本用attachEvent；
（2）attachEvent的事件前必须加on例如“onclick,onresize”等等；
（3）在不同的浏览器里clientWidth的值不同，而且在同一个IE浏览器的不同版本切换时所获得的clientWidth的值也有所不同；

浏览器尺寸判断（兼容标准及低版本ie浏览器）

猜你喜欢