JS判斷瀏覽器類型與操作系統(tǒng)的方法分析

更新時間：2020年04月30日 09:42:45 作者：廖飛銀

這篇文章主要介紹了JS判斷瀏覽器類型與操作系統(tǒng)的方法,結合實例形式分析了JS針對各種常見瀏覽器與操作系統(tǒng)進行判斷的方法,需要的朋友可以參考下

本文實例講述了JS判斷瀏覽器類型與操作系統(tǒng)的方法。分享給大家供大家參考，具體如下：

navigator.userAgent : userAgent 屬性是一個只讀的字符串，聲明了瀏覽器用于 HTTP 請求的用戶代理頭的值。

navigator.platform : platform 屬性是一個只讀的字符串，聲明了運行瀏覽器的操作系統(tǒng)和（或）硬件平臺。

判斷瀏覽器類型

IE瀏覽器

ie = ua.match( /MSIE\s([\d\.]+)/ ) || ua.match( /(?:trident)(?:.*rv:([\w.]+))?/i ),

IE瀏覽器版本號

/msie 8.0/.test(navigator.userAgent.toLowerCase())

微信瀏覽器

/micromessenger/.test(navigator.userAgent.toLowerCase())

chrome

/chrome/.test(navigator.userAgent.toLowerCase())

firefox

/safari/.test(navigator.userAgent.toLowerCase())

opera

/micromessgenger/.test(navigator.userAgent.toLowerCase())

判斷操作系統(tǒng)類型

win操作系統(tǒng)

 navigator.platform == "Win32"
 navigator.platform == "Windows"

mac操作系統(tǒng)

   navigator.platform == "Mac68K"
   navigator.platform == "MacPPC"
   navigator.platform == "Macintosh"
   navigator.platform == "MacIntel"

andorid操作系統(tǒng)

   if(/Linux/i.test(navigator.userAgent)){
     if(/android/i.test(navigator.userAgent.toLowerCase())){
       return "android";
     }
   }
/**
     * @description 簡單的瀏覽器檢查結果。
     *
     * * `webkit` webkit版本號，如果瀏覽器為非webkit內核，此屬性為`undefined`。
     * * `chrome` chrome瀏覽器版本號，如果瀏覽器為chrome，此屬性為`undefined`。
     * * `ie` ie瀏覽器版本號，如果瀏覽器為非ie，此屬性為`undefined`。**暫不支持ie10+**
     * * `firefox` firefox瀏覽器版本號，如果瀏覽器為非firefox，此屬性為`undefined`。
     * * `safari` safari瀏覽器版本號，如果瀏覽器為非safari，此屬性為`undefined`。
     * * `opera` opera瀏覽器版本號，如果瀏覽器為非opera，此屬性為`undefined`。
     *
     * @property {Object} [browser]
     */
    browser: (function( ua ) {
      var ret = {},
        webkit = ua.match( /WebKit\/([\d.]+)/ ),
        chrome = ua.match( /Chrome\/([\d.]+)/ ) ||
          ua.match( /CriOS\/([\d.]+)/ ),

        ie = ua.match( /MSIE\s([\d\.]+)/ ) ||
          ua.match( /(?:trident)(?:.*rv:([\w.]+))?/i ),
        firefox = ua.match( /Firefox\/([\d.]+)/ ),
        safari = ua.match( /Safari\/([\d.]+)/ ),
        opera = ua.match( /OPR\/([\d.]+)/ );

      webkit && (ret.webkit = parseFloat( webkit[ 1 ] ));
      chrome && (ret.chrome = parseFloat( chrome[ 1 ] ));
      ie && (ret.ie = parseFloat( ie[ 1 ] ));
      firefox && (ret.firefox = parseFloat( firefox[ 1 ] ));
      safari && (ret.safari = parseFloat( safari[ 1 ] ));
      opera && (ret.opera = parseFloat( opera[ 1 ] ));

      return ret;
    })( navigator.userAgent ),

    /**
     * @description 操作系統(tǒng)檢查結果。
     *
     * * `android` 如果在android瀏覽器環(huán)境下，此值為對應的android版本號，否則為`undefined`。
     * * `ios` 如果在ios瀏覽器環(huán)境下，此值為對應的ios版本號，否則為`undefined`。
     * @property {Object} [os]
     */
    os: (function( ua ) {
      var ret = {},

        // osx = !!ua.match( /\(Macintosh\; Intel / ),
        android = ua.match( /(?:Android);?[\s\/]+([\d.]+)?/ ),
        ios = ua.match( /(?:iPad|iPod|iPhone).*OS\s([\d_]+)/ );

      // osx && (ret.osx = true);
      android && (ret.android = parseFloat( android[ 1 ] ));
      ios && (ret.ios = parseFloat( ios[ 1 ].replace( /_/g, '.' ) ));

      return ret;
    })( navigator.userAgent ),

PS：這里再為大家提供幾款相關在線工具供大家參考：

在線瀏覽器信息檢測工具：
http://tools.jb51.net/aideddesign/browser_info

常用瀏覽器(PC,移動) user-agent：
http://tools.jb51.net/table/useragent

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript事件相關操作與技巧大全》、《JavaScript頁面元素操作技巧總結》、《JavaScript操作DOM技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章: