JavaScript是前端開發(fā)的主要語言，我們可以通過編寫JavaScript程序來判斷瀏覽器的類型及版本。JavaScript判斷瀏覽器類型一般有兩種辦法，一種是根據(jù)各種瀏覽器獨(dú)有的屬性來分辨，另 一種是通過分析瀏覽器的userAgent屬性來判斷的。本文對(duì)瀏覽器各自的userAgent特點(diǎn)做一分析，并給出判斷方法：

Windows操作系統(tǒng)瀏覽器系列：

IE瀏覽器系列：
特征表現(xiàn)：均以 "mozilla/" 開頭，"msie x.0;" 中的x表示其版本；
判斷方法：粗略判斷可以只檢索 "msie x.0;" 字符串即可，嚴(yán)格判斷可檢索 "mozilla/x.0 (compatibal; msie x.0; windows nt"，不過一般沒有這個(gè)必要
Windows版Firefox：
特征表現(xiàn)：以"mozilla/x.0"開頭，包含"windows nt","gecko/"和"firefox/" ；
判斷方法：粗略判斷可以只檢索 "firefox/"和"windows nt" 字符串，嚴(yán)格判斷可以檢索"mozilla/" ,"windows nt","gecko/"和"firefox/" 四個(gè)字符串；
Windows版Chrome：
特征表現(xiàn)： 以"mozilla/x.0"開頭，包含"windows nt","chrome/"，同時(shí)包含"applewebkit/","safari/"；
判斷方法：粗略判斷可以只檢索 "windows nt"和"chrome/"字符串，嚴(yán)格判斷可以同時(shí)檢索 "mozilla/" ,"windows nt","applewebkit/","safari/","chrome/" 五個(gè)字符串；
Windows版Opera：
特征表現(xiàn)：以"opera/"開頭，含有"windows nt","presto/" 字符串；
判斷方法：粗略判斷只檢索 "windows nt"和"opera/"字符串，嚴(yán)格判斷同時(shí)檢索 "opera/","windows nt" 和 "presto/"；
Windows版Safari：
特征表現(xiàn)：以"mozilla/"開頭，同時(shí)含有"windows nt","applewebkit/","safari/"；
判斷方法：粗略判斷可以檢索含有 "windows nt","safari/" 同時(shí)不包含 "chrome/"，嚴(yán)格判斷需要同時(shí)含有"mozilla/","windows nt","applewebkit/","safari/"但是不包含"chrome/"；
小結(jié)：Windows操作系統(tǒng)上的瀏覽器userAgent均包含"windows nt"字符串來表征windows操作系統(tǒng)。

iPhone平臺(tái)瀏覽器系列：

iPhone自帶safari：
特征表現(xiàn)：以"mozilla/"開頭，含有"iphone"字符串，同時(shí)含有 "mobile/","safari/"字符串；
判斷方法：粗略判斷只檢索 "iphone"和"safari/"字符串，嚴(yán)格判斷則要同時(shí)包含 "mozilla/","iphone","mobile/","safari/"四個(gè)字符串
iPhone版Opera Mobile：
特征表現(xiàn)： 以"opera/"開頭，含有"iphone"字符串，同時(shí)含有 "opera mini/","presto/"字符串；
判斷方法：粗略判斷只檢索 "iphone"和"opera/"字符串，嚴(yán)格判斷則要同時(shí)包含 "opera/","iphone","opera mini/","presto/"四個(gè)字符串
小結(jié)：iPhone手機(jī)上的瀏覽器userAgent均包含"iphone"字符串

Android平臺(tái)瀏覽器系列：

Android自帶瀏覽器（有人說其實(shí)是就chrome，但google自己未做表示，且還在開發(fā)一個(gè)Android上運(yùn)行的Chrome to Phone）：
特征表現(xiàn)： 以"mozilla/"開頭，含有"android"和"linux" 字符串，同時(shí)含有 "applewebkit/","mobile safari/"字符串；
判斷方法：因?yàn)檫€不知道Android上未來會(huì)不會(huì)有獨(dú)立的safari（估計(jì)不會(huì)了），所以建議直接嚴(yán)格判斷，檢索 "mozilla/","android","linux","applewebkit/","mobile safari/"五個(gè)字符串
Android版Opera Mobile：
特征表現(xiàn)： 以"opera/"開頭，含有"android"和"linux" 字符串，同時(shí)含有 "opera mobi/","presto/"字符串；
判斷方法：粗略判斷只檢索 "android"和"opera/"，嚴(yán)格判斷則要同時(shí)包含"opera/","android","linux","opera mobi/","presto/"五個(gè)字符串
Android版Firefox：
特征表現(xiàn)：以"mozilla/"開頭，含有"android"和"linux" 字符串，同時(shí)含有 "firefox/","gecko/","fennec/"字符串；
判斷方法：粗略判斷只檢索 "android"和"firefox/"，嚴(yán)格判斷則要同時(shí)包含"mozilla/","android","linux","firefox/","gecko/","fennec/"六個(gè)字符串
小結(jié)：Android平臺(tái)上的瀏覽器userAgent均包含"android"和"linux"字符串

以上對(duì)windows、iphone、android三大平臺(tái)的主流瀏覽器解析就基本結(jié)束了，其他平臺(tái)的linux估計(jì)至少與android平臺(tái)應(yīng)該類似，而采用了Mac OS的iPad和麥金塔應(yīng)該與iphone平臺(tái)類似，故而暫時(shí)先不做解析，也因?yàn)槭诸^沒有那么多設(shè)備和操作系統(tǒng)來測(cè)試，希望日后能夠補(bǔ)上。

現(xiàn)在的網(wǎng)站產(chǎn)品開發(fā)要求跟以前又不一樣了，因?yàn)椴粌H要滿足電腦瀏覽，還需要滿足用戶通過智能手機(jī)（這里僅指iphone、android、windows phone等真正的智能手機(jī)，blackberry和palm這樣的小眾半智能系統(tǒng)暫時(shí)不考慮，至于symbian這個(gè)偽智能系統(tǒng)就一邊玩去吧）通過以上三個(gè)具有代表性的平臺(tái)，也大致可以推測(cè)出根據(jù)瀏覽器userAgent判斷用戶設(shè)備的解決方案了。

1、如果需要判斷操作系統(tǒng)，方法比較簡(jiǎn)單，在userAgent里面檢索以下字符串：

含有"windows nt"：顯而易見了，windows操作系統(tǒng)，nt后面的版本號(hào)可以判斷OS版本；
含有"mac"：蘋果的Mac OS X或者其他Mac OS內(nèi)核的系統(tǒng)；
含有"iphone"：蘋果iphone手機(jī)專有的，一般情況下也應(yīng)該含有"mac"；
含有"ipad"：蘋果iPad平板電腦（資料表明iPad的瀏覽器userAgent同時(shí)含有"mac","iphone","ipad"）；
含有"linux"：Linux操作系統(tǒng)或者其他以linux作為內(nèi)核的操作系統(tǒng)；
含有"android"：谷歌的Android操作系統(tǒng)，有可能是智能手機(jī)，也有可能是安卓版的平板電腦哦，一般情況下android平臺(tái)上的userAgent也應(yīng)該包含"linux"；
含有"unix","sunos","bsd"三者之一：Unix系統(tǒng)，其實(shí)對(duì)這個(gè)系統(tǒng)的用戶體驗(yàn)問題，目前幾乎可以不用考慮了；
含有"ubuntu"：ubuntu定制版的linux
……

你也看到了，判斷操作系統(tǒng)及其版本其實(shí)并不一直有用，但總有能用到的地方，比如開發(fā)專門針對(duì)iphone、ipad、android等設(shè)備屏幕分辨率的頁(yè)面

2、判斷瀏覽器的內(nèi)核，方法也不困難，我自己琢磨出來的，不一定都對(duì)啊：

IE（Trident）內(nèi)核（IE for Mac, IEs4Linux之類的就不用說了，只考慮windows下的）：以"mozilla/"開頭，含有"windows nt"和"msie"字符串；
Firefox（Gecko）內(nèi)核：以"mozilla/"開頭，含有"firefox/"和"gecko/"字符串的就是啦，其中Android版的還帶有"fennec/"字符串；
Opera（）內(nèi)核：以"opera/"開頭，含有"presto/"字符串，其中iphone版還帶有"opera mini/"，Android版也帶有"opera mobi/"；
Webkit內(nèi)核：以"mozilla/"開頭，含有"applewebkit/"和"safari/"字符串，其中帶有"chrome/"的就是Chrome瀏覽器，不帶的就是Safari或其他；
以上就是主要的瀏覽器內(nèi)核了

瀏覽器內(nèi)核才是解決兼容性的關(guān)鍵問題所在，然而，這個(gè)兼容性問題已經(jīng)有jQuery和Extjs等框架幫你解決了，因此這個(gè)判斷只針對(duì)個(gè)別頁(yè)面的CSS樣式在不同內(nèi)核渲染效果不同的情況下使用，當(dāng)然了，同樣的內(nèi)核在智能手機(jī)和電腦等不同設(shè)備上渲染結(jié)果也不同，這一點(diǎn)也需要注意。

3、判斷瀏覽器useAgent的實(shí)際應(yīng)用舉例：

不同瀏覽器內(nèi)核對(duì)頁(yè)面的渲染效果不同，雖然已經(jīng)有jQuery和Extjs等為我們做了兼容處理，但是依然會(huì)有一些細(xì)小的差別需要我們單獨(dú)處理，此時(shí)需要判斷瀏覽器內(nèi)核；
用戶并不僅僅是通過電腦訪問網(wǎng)站的，隨著智能手機(jī)的日益普及還有平板電腦的大行其道，使用這兩者來上網(wǎng)的比例越來越高，怎么辦？平板電腦還好，屏幕大分辨率高，智能手機(jī)受限于他的屏幕尺寸和分辨率，雖有強(qiáng)勁的處理能力，也可以完美支持現(xiàn)有的網(wǎng)站，但是為客戶多考慮一點(diǎn)總沒有壞處你說對(duì)吧？畢竟通過局部縮放拖拽的方式看網(wǎng)頁(yè)很不舒服，這時(shí)呢，我們就可以專門為iphone、android這樣的窄條屏幕提供一個(gè)專用版本來布局了，一來提升瀏覽體驗(yàn)，二來降低網(wǎng)絡(luò)流量，加快訪問速度；
做訪客流量分析，通過判斷客戶瀏覽器類型并記錄其數(shù)量，來優(yōu)化設(shè)計(jì)自己的網(wǎng)站，以分別提升其客戶體驗(yàn)

最新評(píng)論