JavaScript--判断客户端是移动端还是pc端

方法一:根据js判断结果引入不同的css样式文件

			//向head标签添加link标签
			function includeLinkStyle(url) {
    
    
				var link = document.createElement("link");
				link.rel = "stylesheet";
				link.type = "text/css";
				link.href = url;
				document.getElementsByTagName("head")[0].appendChild(link);
			}
			//判断客户端
			function IsPC() {
    
    
				var userAgentInfo = navigator.userAgent;
				var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
				var flag = true;
				for(var v = 0; v < Agents.length; v++) {
    
    
					if(userAgentInfo.indexOf(Agents[v]) > 0) {
    
    
						flag = false;
						break;
					}
				}
				return flag;
			}
			if(/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
    
    
				//移动端设备
				includeLinkStyle('css/m.css')
			} else {
    
    
				//pc端
				includeLinkStyle('css/pc.css')
			}

方法二:利用css3的媒体查询,在不同的分辨率下应用不同的css文件

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="x5-orientation" content="portrait" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0,viewport-fit=cover">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/pc.css" media="screen and (min-width: 1000px)">
		<link rel="stylesheet" type="text/css" href="css/m.css" media="screen and (max-width: 999px)">
	</head>

猜你喜欢

转载自blog.csdn.net/weixin_45406850/article/details/126579082
今日推荐