對於前端來說,瀏覽器檢測已經不陌生了,在做一些頁面是,需要針對不同的瀏覽器進行處理不同的邏輯,最簡單的就是區分pc和移動端的瀏覽器,或是android 和ios下的瀏覽器。
一、瀏覽器檢測的由來?
在20世紀90年代初期,網景公司開發的 Netscape Navigator開始流行起來,隨后便產生的瀏覽器大戰,主要在於兩大巨頭之間(Netscape/微軟ie);由於那時各家瀏覽器都有自己的標准,使用內核也不一樣,個版本之間也存在差異(萬惡的IE);造成網頁開發者需要針對不同的瀏覽器進行適配。后期產生了大量的瀏覽器廠商,各自都擁有自己的瀏覽器了,但是主要內核還是還是掌握在巨頭公司里;
瀏覽器內核及常見瀏覽器:
- trident(IE內核):IE、360安全瀏覽器、獵豹安全瀏覽器、傲游瀏覽器、百度瀏覽器
- gecko(Firefox內核):Mozilla FireFox(火狐瀏覽器)
- webkit(蘋果內核):Safari、Chrome
其中我們國內大部分瀏覽器基本都是使用雙內核(trident + webkit),當你開啟高速模式時,就是切換使用了webkit內核;當然不能一概而論,有些新版本使用了google研發的新的排版引擎 blink
二、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”這樣的字符;
三、navigator.userAgent 格式
因為各大瀏覽器廠商在進行設置 userAgent 時都有自己的小心思,導致了userAgent 的格式也非常的混亂;比如上面說到的IE,為了能讓IE用戶可以訪問那時火熱的Netscape Navigator頁面,就偽裝成了Netscape;蘋果公司在開發webkit 內核時,一個新的瀏覽器,怎么樣才能破解這個被別人占領的市場呢,那就是使用IE那一套,在userAgent中放了詳細的信息,偽裝成了即兼容Mozilla又兼容Gecko內核的Firefox瀏覽器;
部分瀏覽器格式如下(PC):
- chrome瀏覽器:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36
- 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
- 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
- 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
- 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
- Firefox 4.0.1 – Windows:User-Agent:Mozilla/5.0 (Windows NT 6.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1
- 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
- Opera 11.11 – Windows:User-Agent:Opera/9.80 (Windows NT 6.1; U; en) Presto/2.8.131 Version/11.11
- 360瀏覽器:User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; 360SE)
- 搜狗瀏覽器 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)
部分瀏覽器格式如下(移動端):
- 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
- 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
- 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
- Windows Phone:User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; HTC; Titan)
- 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+
- UC標准:User-Agent: NOKIA5700/ UCWEB7.0.2.37/28/999
四、解析userAgent進行瀏覽器檢測
通過觀察各瀏覽器的userAgent字段,可以從中進行細分瀏覽器類型;例如:
- 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; }
- 瀏覽器類型檢測,都是使用正則進行檢測關鍵字,具體參考 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 ) || [];
五、精准度?
通過userAgent判斷可以區分大部分瀏覽器,但是少數瀏覽器該字段的檢測會帶來誤區,特別是國內瀏覽器,開發頁面時需要針對具體的瀏覽器進行區分嗅探;
【參考鏈接】
①、browser.js : https://cdn.bootcss.com/jquery-browser/0.1.0/jquery.browser.js
②、簡書(常用瀏覽器的useragent):http://www.jianshu.com/p/126080096801
【結束語】
系列文章,包括了原創,翻譯,轉載等各類型的文章;一方面是為了自己總結,另一方面頁希望可以共享知識;在技術方面有輸入,也要有所輸出,才能更進一步!文章基於自己的實踐、閱讀及理解,如有不合理及錯誤的地方,煩請各大佬評論指出,以便改正,感謝!