navigator.userAgent瀏覽器檢測（前端基礎系列）

      對於前端來講，瀏覽器檢測已經不陌生了，在作一些頁面是，須要針對不一樣的瀏覽器進行處理不一樣的邏輯，最簡單的就是區分pc和移動端的瀏覽器，或是android 和ios下的瀏覽器。

1、瀏覽器檢測的由來？
     在20世紀90年代初期，網景公司開發的 Netscape Navigator開始流行起來，隨後便產生的瀏覽器大戰，主要在於兩大巨頭之間（Netscape/微軟ie）；因爲那時各家瀏覽器都有本身的標準，使用內核也不同，個版本之間也存在差別（萬惡的IE）；形成網頁開發者須要針對不一樣的瀏覽器進行適配。後期產生了大量的瀏覽器廠商，各自都擁有本身的瀏覽器了，可是主要內核仍是仍是掌握在巨頭公司裏；
瀏覽器內核及常見瀏覽器：

1. trident（IE內核）：IE、360安全瀏覽器、獵豹安全瀏覽器、傲遊瀏覽器、百度瀏覽器
2. gecko（Firefox內核）：Mozilla FireFox(火狐瀏覽器)
3. webkit（蘋果內核）：Safari、Chrome

其中咱們國內大部分瀏覽器基本都是使用雙內核（trident + webkit），當你開啓高速模式時，就是切換使用了webkit內核；固然不能一律而論，有些新版本使用了google研發的新的排版引擎 blink

 

2、navigator.userAgent產生？
      navigator.userAgent最初是有網景公司的Netscape Navigator流行後，後續瀏覽器跟隨網景公司的格式進行模仿，例如，Netscape Navigator 3 發佈不久，微軟公佈了它的首款 web 瀏覽器： IE 3，可是 Netscape 是當時首選瀏覽器，大多數服務器在加載頁面前都會檢查 user-agent 是否爲該款瀏覽器。IE 若是不兼容Netscape user-agent 字串，使用 IE 的用戶就根本打不開這些頁面，因而造就了以下格式：
Mozilla/2.0 (compatible; MSIE 3.02; Windows 95)
結果就是 IE 搖身一變被識別成了 Mozilla，假裝成 Netscape Navigator，這就是現在你們查看大部分瀏覽器的userAgen 字段中都會有「Mozilla/5.0」這樣的字符；

 

3、navigator.userAgent 格式

由於各大瀏覽器廠商在進行設置 userAgent 時都有本身的當心思，致使了userAgent 的格式也很是的混亂；好比上面說到的IE，爲了能讓IE用戶能夠訪問那時火熱的Netscape Navigator頁面，就假裝成了Netscape；蘋果公司在開發webkit 內核時，一個新的瀏覽器，怎麼樣才能破解這個被別人佔領的市場呢，那就是使用IE那一套，在userAgent中放了詳細的信息，假裝成了即兼容Mozilla又兼容Gecko內核的Firefox瀏覽器；

部分瀏覽器格式以下（PC）：

1. chrome瀏覽器：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36
2. IE11瀏覽器：Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; McAfee; rv:11.0) like Gecko
3. safari 5.1 – MAC：User-Agent:Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; en-us) AppleWebKit/534.50 (KHTML, like Gecko) Version/5.1 Safari/534.50
4. safari 5.1 – Windows：User-Agent:Mozilla/5.0 (Windows; U; Windows NT 6.1; en-us) AppleWebKit/534.50 (KHTML, like Gecko) Version/5.1 Safari/534.50
5. Firefox 4.0.1 – MAC：User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0.1) Gecko/20100101 Firefox/4.0.1
6. Firefox 4.0.1 – Windows：User-Agent:Mozilla/5.0 (Windows NT 6.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1
7. Opera 11.11 – MAC：User-Agent:Opera/9.80 (Macintosh; Intel Mac OS X 10.6.8; U; en) Presto/2.8.131 Version/11.11
8. Opera 11.11 – Windows：User-Agent:Opera/9.80 (Windows NT 6.1; U; en) Presto/2.8.131 Version/11.11
9. 360瀏覽器：User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; 360SE)
10. 搜狗瀏覽器 1.x：User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0; SE 2.X MetaSr 1.0; SE 2.X MetaSr 1.0; .NET CLR 2.0.50727; SE 2.X MetaSr 1.0)

部分瀏覽器格式以下（移動端）：

1. iphone6：Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1
2. ipad：Mozilla/5.0 (iPad; CPU OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1
3. Android QQ瀏覽器 For android：User-Agent: MQQBrowser/26 Mozilla/5.0 (Linux; U; Android 2.3.7; zh-cn; MB200 Build/GRJ22; CyanogenMod-7) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
4. Windows Phone：User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; HTC; Titan)
5. BlackBerry：User-Agent: Mozilla/5.0 (BlackBerry; U; BlackBerry 9800; en) AppleWebKit/534.1+ (KHTML, like Gecko) Version/6.0.0.337 Mobile Safari/534.1+
6. UC標準：User-Agent: NOKIA5700/ UCWEB7.0.2.37/28/999

4、解析userAgent進行瀏覽器檢測

　　經過觀察各瀏覽器的userAgent字段，能夠從中進行細分瀏覽器類型；例如：

1. PC與移動端的區分
   主要是根據userAgent中包含的系統字符進行判斷，好比桌面系統主要包含：windows/mac/cros/linux ; 而移動端比較複雜，不能簡單區分Android/ios，好比還有ipad/kindle/blackbary/windows phone等；具體參考browser.js中的檢測方式：

var platform_match = /(ipad)/.exec( ua ) ||
      /(ipod)/.exec( ua ) ||
      /(windows phone)/.exec( ua ) ||  // 區分windows phone手機
      /(iphone)/.exec( ua ) ||
      /(kindle)/.exec( ua ) || // 亞馬遜的 kindle
      /(silk)/.exec( ua ) || // 亞馬遜的 silk 瀏覽器
      /(android)/.exec( ua ) ||
      /(win)/.exec( ua ) || // windows 系統，注意必須放在 檢測 windows phone 手機以後
      /(mac)/.exec( ua ) ||
      /(linux)/.exec( ua ) ||
      /(cros)/.exec( ua ) ||
      /(playbook)/.exec( ua ) || // 黑莓的 playbook瀏覽器
      /(bb)/.exec( ua ) || // 黑莓手機
      /(blackberry)/.exec( ua ) || // 黑莓手機
      [];
    
    // mobile 檢測
     if ( browser.android || browser.bb || browser.blackberry || browser.ipad || browser.iphone ||
      browser.ipod || browser.kindle || browser.playbook || browser.silk || browser[ "windows phone" ]) {
      browser.mobile = true;
    }
    
    // pc 檢測
     if ( browser.cros || browser.mac || browser.linux || browser.win ) {
      browser.desktop = true;
    }

 

2. 瀏覽器類型檢測，都是使用正則進行檢測關鍵字，具體參考 browser.js

var match = /(edge)\/([\w.]+)/.exec( ua ) ||
      /(opr)[\/]([\w.]+)/.exec( ua ) ||
      /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
      /(iemobile)[\/]([\w.]+)/.exec( ua ) ||
      /(version)(applewebkit)[ \/]([\w.]+).*(safari)[ \/]([\w.]+)/.exec( ua ) ||
      /(webkit)[ \/]([\w.]+).*(version)[ \/]([\w.]+).*(safari)[ \/]([\w.]+)/.exec( ua ) ||
      /(webkit)[ \/]([\w.]+)/.exec( ua ) ||
      /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
      /(msie) ([\w.]+)/.exec( ua ) ||
      ua.indexOf("trident") >= 0 && /(rv)(?::| )([\w.]+)/.exec( ua ) ||
      ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
      [];

 

5、精準度？
　　經過userAgent判斷能夠區分大部分瀏覽器，可是少數瀏覽器該字段的檢測會帶來誤區，特別是國內瀏覽器，開發頁面時須要針對具體的瀏覽器進行區分嗅探；

 

【參考連接】 

　　①、browser.js : https://cdn.bootcss.com/jquery-browser/0.1.0/jquery.browser.js

　　②、簡書（經常使用瀏覽器的useragent）：http://www.jianshu.com/p/126080096801

 

【結束語】

   系列文章，包括了原創，翻譯，轉載等各種型的文章；一方面是爲了本身總結，另外一方面頁但願能夠共享知識；在技術方面有輸入，也要有所輸出，才能更進一步！文章基於本身的實踐、閱讀及理解，若有不合理及錯誤的地方，煩請各大佬評論指出，以便改正，感謝！