最近用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的函數,這樣就搞定了。