navigator

最新推荐文章于 2023-03-05 22:31:24 发布

L—wan

最新推荐文章于 2023-03-05 22:31:24 发布

阅读量109

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_47182606/article/details/108566917

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#icon{
				width: 100px;
				height: 100px;
				background-size: 100% 100%;
				
			}
			.iphone #icon{
				background-image: url(img/iphoneX.png);
			}
			.ipad #icon{
				background-image: url(img/ipad.png);
			}
			.android #icon{
				background-image: url(img/android.png);
			}
			.pc #icon{
				background-image: url(img/pc.png);
			}
			
			.lt640 #icon{
				width: 400px;
				height: 400px;
			}
			
			.gt1200 #icon{
				width: 500px;
				height: 500px;
			}
		</style>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<div id="icon">
			
		</div>
		<script type="text/javascript">	
			function lcXys(){
				var html = document.querySelector('html')
				var userAgent = navigator.userAgent
				//userAgent.indexOf("iPhone"),通过此方法可以获取iphone在字符中的索引值
				html.className = "";
				if(userAgent.indexOf("iPhone")!=-1){
					//console.log(iphone)
					html.classList.add("iphone")
				}else if(userAgent.indexOf("Android")!=-1){
					//console.log(iphone)
					html.classList.add("android")
				}else if(userAgent.indexOf("iPad")!=-1){
					//console.log(iphone)
					html.classList.add("ipad")
				}else{
					html.classList.add("pc")
				}
				
				//作业:window.innerWidth,可以获取窗口的宽度,所以可以根据窗口的宽度,来设定html的样式(lt640,lt960,lt1200,gt640,gt960,gt1200)
		
			if(window.innerWidth < 640){
				html.classList.add('lt640')
				html.classList.add("lt960")
				html.classList.add("lt1200")
			}else if(window.innerWidth < 960){
				html.classList.add("lt960")
				html.classList.add("lt1200")
				html.classList.add('gt640')
			}else if(window.innerWidth < 1200){
				html.classList.add('gt640')
				html.classList.add("gt960")
				html.classList.add("lt1200")
			}else{
				html.classList.add('gt640')
				html.classList.add("gt960")
				html.classList.add("gt1200")
				}
			}
			lcXys()
			window.onresize = function(){
				lcXys()
			}
		</script>
	</body>
</html>