js判斷當前設備


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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM