zoukankan      html  css  js  c++  java
  • 仿响应式html:JS来判断页面是在手机端还是在PC端打开的方法

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
    本文链接:https://blog.csdn.net/a419419/article/details/78752417

    我们想要的效果是pc文件和mobile文件统一入口,适配不同的设备。
    先看看项目的目录:
    这里写图片描述
    在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>
     

     

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

    <script type="text/javascript">
    	function browserRedirect() {
               var sUserAgent = navigator.userAgent.toLowerCase();
               if (/ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(sUserAgent)) {
                   //跳转移动端页面
                   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>
     
  • 相关阅读:
    uva 11997
    【USACO 3.1.1】最短网络
    【USACO 2.4.5】分数化小数
    【USACO 2.4.4】回家
    【USACO 2.4.3】牛的旅行
    【USACO 2.4.2】穿越栅栏
    【USACO 2.4.1】两只塔姆沃斯牛
    【USACO 2.3.5】控制公司
    【USACO 2.3.4】货币系统
    【USACO 2.3.3】零数列
  • 原文地址:https://www.cnblogs.com/gaidy/p/11634420.html
Copyright © 2011-2022 走看看