js判斷PC端與移動端跳轉

在網上看到很多這樣類似的代碼，但是有的很復雜，或者有的沒有判斷完全，上次經理去見完客戶回來講，使用蘋果瀏覽打開pc端（pc已經做了識別跳轉）會自動跳轉到移動端的網頁去，后來經測試才發現

document.writeln(" 是否為移動終端: "+browser.versions.mobile+"</br>");  //打印出來 true

所以在完整版的代碼中 第一層if 判斷一直是true 
以上的原因是因為，網上流傳的判斷為：  

mobile: !! u.match(/AppleWebKit.*Mobile.*/) || !! u.match(/AppleWebKit/), //是否為移動終端

判斷不完整才會造成這種原因。

 

正確的判斷應該為：

mobile: !! u.match(/AppleWebKit.*Mobile.*/) || !! u.match(/AppleWebKit/) && u.indexOf('QIHU') && u.indexOf('QIHU') > -1 && u.indexOf('Chrome') < 0,  //是否為移動終端

 

 

 

測試程序代碼

var browser = {
    versions: function() {
        var u = navigator.userAgent;
        return {
            trident: u.indexOf('Trident') > -1,
            presto: u.indexOf('Presto') > -1,
            webKit: u.indexOf('AppleWebKit') > -1,
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
            mobile: !! u.match(/AppleWebKit.*Mobile.*/) || !! u.match(/AppleWebKit/) && u.indexOf('QIHU') && u.indexOf('QIHU') > -1 && u.indexOf('Chrome') < 0,
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
            iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1,
            iPad: u.indexOf('iPad') > -1,
            webApp: u.indexOf('Safari') == -1
        }
    } (),
    language:(navigator.browserLanguage || navigator.language).toLowerCase()
};


document.writeln("語言版本: "+browser.language+"</br>");
document.writeln(" 是否為移動終端: "+browser.versions.mobile+"</br>");
document.writeln(" ios終端: "+browser.versions.ios+"</br>");
document.writeln(" android終端: "+browser.versions.android+"</br>");
document.writeln(" 是否為iPhone: "+browser.versions.iPhone+"</br>");
document.writeln(" 是否iPad: "+browser.versions.iPad+"</br>");
document.writeln(navigator.userAgent+"</br>");

 

 

完整版，運用於項目代碼

/*
*
* 判斷PC端與WAP端
*/
var mobile_bs = {
    versions: function() {
        var u = navigator.userAgent;
        return {
            trident: u.indexOf('Trident') > -1, //IE內核
            presto: u.indexOf('Presto') > -1,  //opera內核
            webKit: u.indexOf('AppleWebKit') > -1,  //蘋果、谷歌內核
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,  //火狐內核
            mobile: !! u.match(/AppleWebKit.*Mobile.*/) || !! u.match(/AppleWebKit/) && u.indexOf('QIHU') && u.indexOf('QIHU') > -1 && u.indexOf('Chrome') < 0,  //是否為移動終端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),  //ios終端
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,  //android終端或者uc瀏覽器
            iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1,   //是否為iPhone或者QQHD瀏覽器
            iPad: u.indexOf('iPad') > -1,     //是否iPad
            webApp: u.indexOf('Safari') == -1   //是否web應該程序，沒有頭部與底部
        }
    } ()
};

if (mobile_bs.versions.mobile) {
    if (mobile_bs.versions.android || mobile_bs.versions.iPhone || mobile_bs.versions.iPad || mobile_bs.versions.ios) {
        window.location.href = "移動端網址";
    }
};