最近用bootstrap做自适应,发现仍然很难很好的兼容web端和PC端的现实。
仔细观察百度,淘宝,京东等大型网站,发现这些网站都有对应不同客户端的子站。
例如:
站点 | PC端url | web端url |
---|---|---|
百度 | www.baidu.com | m.baidu.com |
淘宝 | www.taobao.com | m.taobao.com |
京东 | www.jd.com | m.jd.com |
网易 | www.163.com | 3g.163.com |
虽然对应不同的客户端做了不同的页面,但如何得知用户当前用的什么呢?
通过度娘找到了一套简单易理解的js代码
/*判断当前设备跳转到指定地址。PCurl:PC端地址;WebUel:PC端地址;*/ function judgmentClient(PCurl,WebUel){ var UserClient = navigator.userAgent.toLowerCase(); var IsIPad = UserClient.match(/ipad/i) == "ipad"; var IsIphoneOs = UserClient.match(/iphone os/i) == "iphone os"; var IsMidp = UserClient.match(/midp/i) == "midp"; var IsUc7 = UserClient.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; var IsUc = UserClient.match(/ucweb/i) == "ucweb"; var IsAndroid = UserClient.match(/android/i) == "android"; var IsCE = UserClient.match(/windows ce/i) == "windows ce"; var IsWM = UserClient.match(/windows mobile/i) == "windows mobile"; if(IsIPad || IsIphoneOs || IsMidp || IsUc7 || IsUc || IsAndroid || IsCE || IsWM){ window.location = WebUel; }else{ window.location = PCurl; } }
这套代码虽然可以直接使用,但会有个调用的问题。
假设现有一个PC页 和 一个Web页,这两个页面onload的时候都调用这个函数,结果是反复调用此函数,页面不停刷新。(有兴趣的朋友可以自行尝试)
起初这个调用bug想了两个小时就是绕不出来。(本菜有点愚钝)
后来终于想明白了,其实就是把这个拆开成两个函数,分开调用就OK了。
// PC端调用判断web设备 function PCjudgment(WebUel){ var UserClient = navigator.userAgent.toLowerCase(); var IsIPad = UserClient.match(/ipad/i) == "ipad"; var IsIphoneOs = UserClient.match(/iphone os/i) == "iphone os"; var IsMidp = UserClient.match(/midp/i) == "midp"; var IsUc7 = UserClient.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; var IsUc = UserClient.match(/ucweb/i) == "ucweb"; var IsAndroid = UserClient.match(/android/i) == "android"; var IsCE = UserClient.match(/windows ce/i) == "windows ce"; var IsWM = UserClient.match(/windows mobile/i) == "windows mobile"; if(IsIPad || IsIphoneOs || IsMidp || IsUc7 || IsUc || IsAndroid || IsCE || IsWM){ window.location = WebUel; } } // web端调用判断PC设备 function Webjudgment(pcUel){ var UserClient = navigator.userAgent.toLowerCase(); var IsIPad = UserClient.match(/ipad/i) == "ipad"; var IsIphoneOs = UserClient.match(/iphone os/i) == "iphone os"; var IsMidp = UserClient.match(/midp/i) == "midp"; var IsUc7 = UserClient.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; var IsUc = UserClient.match(/ucweb/i) == "ucweb"; var IsAndroid = UserClient.match(/android/i) == "android"; var IsCE = UserClient.match(/windows ce/i) == "windows ce"; var IsWM = UserClient.match(/windows mobile/i) == "windows mobile"; if(!IsIPad && !IsIphoneOs && !IsMidp && !IsUc7 && !IsUc && !IsAndroid && !IsCE && !IsWM){ window.location = pcUel; } }
pc端调用pc的函数,web端调用web的函数,这样就搞定了。