仿响应式html:JS来判断页面是在手机端还是在PC端打开的方法

约定不等于承诺〃 2022-06-04 08:17 160阅读 0赞

我们想要的效果是pc文件和mobile文件统一入口，适配不同的设备。  
先看看项目的目录：  
![这里写图片描述][SouthEast]  
在index.html里面配置js控制选择那一个文件夹下的文件就可以了。  
我们要利用：Navigator 对象，Navigator 对象包含有关浏览器的信息。  
index.html很简单，直接上码吧：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    		<script type="text/javascript">
    			function browserRedirect() {
    	            var sUserAgent = navigator.userAgent.toLowerCase();
    	            var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
    	            var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
    	            var bIsMidp = sUserAgent.match(/midp/i) == "midp";
    	            var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    	            var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
    	            var bIsAndroid = sUserAgent.match(/android/i) == "android";
    	            var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    	            var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
    	            if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
    	                //跳转移动端页面
    	                window.location.href="http://f.jcngame.com/fanfan20171208/mobile/index.html";
    	            } else {
    	                //跳转pc端页面
    	                window.location.href="http://f.jcngame.com/fanfan20171208//fanmai/index.html";
    	            }
    	        }
    			browserRedirect(); 
    		</script>
    	</head>
    	<body>
    		
    	</body>
    </html>

补充，感觉之前代码太冗余了，现在用正则来优化了一下：

![这里写图片描述][SouthEast 1]  
![这里写图片描述][SouthEast 2]

[SouthEast]: /images/20220604/7b0e0aade7e84d4082745da10d0187db.png
[SouthEast 1]: /images/20220604/40b33953fdc0480ca194080ab1a367b8.png
[SouthEast 2]: /images/20220604/f0e34839d31943a1a9c526c2188569c5.png