前言
最近做完公司官网,因为不是做的响应式,而是分别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判断代码
有需要的朋友可以领取支付宝到店红包,能省一点是一点