js判断用户访问设备为mobile还是pc的方法和思考

前言

最近做完公司官网，因为不是做的响应式，而是分别PC和mobile各写了一套，所以有这样一个需求：

识别用户访问设备，如果用户通过电脑访问，则跳转至PC官网；反之通过手机访问，则跳转至mobile官网。

那应该怎么实现呢？

解决方法

查了很多方法，最终选择了下面这种

<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";
            document.writeln("您的浏览设备为：");
            if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
                document.writeln("phone");
            } else {
                document.writeln("pc");
            }
        }

        browserRedirect();
</script>

我自己稍微优化了一下代码

 //检测移动端还是PC端登录，分别跳转到对应移动和PC官网
            (function() {
                var sUserAgent = navigator.userAgent.toLowerCase(),
                    bIsIpad = sUserAgent.match(/ipad/i) == "ipad",
                    bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os",
                    bIsMidp = sUserAgent.match(/midp/i) == "midp",
                    bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4",
                    bIsUc = sUserAgent.match(/ucweb/i) == "ucweb",
                    bIsAndroid = sUserAgent.match(/android/i) == "android",
                    bIsCE = sUserAgent.match(/windows ce/i) == "windows ce",
                    bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
                if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
                    window.location.href = './mobile/index.html';

                } else {
                    window.location.href = './PC/index.html';
                }
            })()

经测试，苹果安卓手机，电脑浏览器均能正常实现根据不同设备访问跳转官网，iPad暂时没测

一些思考

1.  和后端同事确认一下PC和mobile官网是各自用1个域名，还是共用1个域名分2个目录，不同的访问路径

不同域名：比如 www.aa.com / www.bb.com

相同域名：比如 www.aa.com/pc  /  www.aa.com/mobile

不同域名直接根据上面js代码跳转至对应域名即可，相同域名有一些注意事项。

①：用户输入网站域名即可跳转至官网，而无需手动输入域名后的资源路径。所以域名肯定不能回带上路径。

所以需要做一些操作。下面是后端同事发布代码到服务器上的截图，而相同域名下不能直接这样，

 

需要在同级目录下额外增加一个index.html文件，这个文件也要加入上面的js判断代码

根目录如下  

pc

mobile

index.html (包含js判断代码) 

 

主要目的是根据用户不同访问设备跳转至对应PC或mobile官网，这样做的另一个好处就是用户只需要输入官网域名，

不需要带上路径，本来用户需要输入www.aa.com/pc或www.bb.com/mobile才能访问对应官网，

现在用户输入www.aa.com就能直接访问到对应官网，就是额外添加的同级目录下的index.html文件帮忙实现的。

 

你可能会有个疑问，既然index.html中已经添加了js代码判断用户访问设备，那PC和mobile中的index.html中是否可以不加判断？

答案是否定的。

 

如果用户直接用电脑访问mobile官网或用mobile设备访问PC官网，你要不要给用户跳转官网？肯定是要跳转的，

所以当出现此类情况，需要判断用户当前是否是用电脑或手机在访问PC或mobile官网，如果不是，则需要给用户跳转回对应官网。

比如用户用电脑访问mobile官网，需要给用户跳转回PC官网，mobile相同。

 

 

②：另外需要注意的是，PC和mobile中index.html文件也都需要添加上面的js判断代码，但只需要一个判断

 

同级目录下index.html中的js判断代码

 PC中index.html中js判断代码

 mobile中index.html中js判断代码