js判斷操作系統與瀏覽器

摘要：

　　對於前端開發我們最重要的工作就是兼容性，系統的兼容性，瀏覽器的兼容性等等。今天分享一個我在項目中封裝的判斷操作系統與瀏覽器的方法。

操作系統：

var os = (function() {
    var UserAgent = navigator.userAgent.toLowerCase();
    return {
        isIpad          : /ipad/.test(UserAgent),
        isIphone        : /iphone os/.test(UserAgent),
        isAndroid       : /android/.test(UserAgent),
        isWindowsCe     : /windows ce/.test(UserAgent),
        isWindowsMobile : /windows mobile/.test(UserAgent),
        isWin2K         : /windows nt 5.0/.test(UserAgent),
        isXP            : /windows nt 5.1/.test(UserAgent),
        isVista         : /windows nt 6.0/.test(UserAgent),
        isWin7          : /windows nt 6.1/.test(UserAgent),
        isWin8          : /windows nt 6.2/.test(UserAgent),
        isWin81         : /windows nt 6.3/.test(UserAgent),
        isMac           : /mac os/.test(UserAgent)
    };
}());

 

如果要判斷系統是否是iPad，只需要判斷if(os.isIpad) {}.

瀏覽器：

 

var bw = (function() {
    var UserAgent = navigator.userAgent.toLowerCase();
    return {
        isUc      : /ucweb/.test(UserAgent), // UC瀏覽器
        isChrome  : /chrome/.test(UserAgent.substr(-33,6)), // Chrome瀏覽器
        isFirefox : /firefox/.test(UserAgent), // 火狐瀏覽器
        isOpera   : /opera/.test(UserAgent),  // Opera瀏覽器
        isSafire  : /safari/.test(UserAgent) && !/chrome/.test(UserAgent), // safire瀏覽器
        is360     : /360se/.test(UserAgent), // 360瀏覽器
        isBaidu   : /bidubrowser/.test(UserAgent), // 百度瀏覽器
        isSougou  : /metasr/.test(UserAgent), // 搜狗瀏覽器
        isIE6     : /msie 6.0/.test(UserAgent), // IE6
        isIE7     : /msie 7.0/.test(UserAgent), // IE7
        isIE8     : /msie 8.0/.test(UserAgent), // IE8
        isIE9     : /msie 9.0/.test(UserAgent), // IE9
        isIE10    : /msie 10.0/.test(UserAgent), // IE10
        isIE11    : /msie 11.0/.test(UserAgent), // IE11
        isLB      : /lbbrowser/.test(UserAgent), // 獵豹瀏覽器
　　　　 isWX      : /micromessenger/.test(UserAgent), // 微信內置瀏覽器
        isQQ      : /qqbrowser/.test(UserAgent) // QQ瀏覽器
    };
}());

 

小結：

　　瀏覽器都是本人親自測試的，可能會有問題的是chrome瀏覽器，因為大部分瀏覽器都是使用WebKit內核，所以我就把chrome的navigator截取出來區分。如果以后chrome的navigator的信息位置或者chrome之后的長度發生改變就容易出現問題，但目前來看是可以的。