原文地址:http://www.cnblogs.com/dowinning/archive/2011/07/22/2113981.html 前文《Web開發(fā)兼容性系列文章(一):不同設(shè)備瀏覽器的userAgent值大全》羅列了常用電腦瀏覽器及智能手機瀏覽器的userAgent值 這里對瀏覽器各自的userAgent特點做一分析,,并給出判斷方法:
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",,不過一般沒有這個必要 - Windows版Firefox:
特征表現(xiàn):以"mozilla/x.0"開頭,包含"windows nt","gecko/"和"firefox/" ,; 判斷方法:粗略判斷可以只檢索 "firefox/"和"windows nt" 字符串,,嚴(yán)格判斷可以檢索"mozilla/" ,"windows nt","gecko/"和"firefox/" 四個字符串; - Windows版Chrome:
特征表現(xiàn): 以"mozilla/x.0"開頭,,包含"windows nt","chrome/",,同時包含"applewebkit/","safari/"; 判斷方法:粗略判斷可以只檢索 "windows nt"和"chrome/"字符串,,嚴(yán)格判斷可以同時檢索 "mozilla/" ,"windows nt","applewebkit/","safari/","chrome/" 五個字符串,; - Windows版Opera:
特征表現(xiàn):以"opera/"開頭,含有"windows nt","presto/" 字符串,; 判斷方法:粗略判斷只檢索 "windows nt"和"opera/"字符串,,嚴(yán)格判斷同時檢索 "opera/","windows nt" 和 "presto/"; - Windows版Safari:
特征表現(xiàn):以"mozilla/"開頭,,同時含有"windows nt","applewebkit/","safari/",; 判斷方法:粗略判斷可以檢索含有 "windows nt","safari/" 同時不包含 "chrome/",嚴(yán)格判斷需要同時含有"mozilla/","windows nt","applewebkit/","safari/"但是不包含"chrome/",; - 小結(jié):Windows操作系統(tǒng)上的瀏覽器userAgent均包含"windows nt"字符串來表征windows操作系統(tǒng),。
iPhone平臺瀏覽器系列:
- iPhone自帶safari:
特征表現(xiàn):以"mozilla/"開頭,含有"iphone"字符串,,同時含有 "mobile/","safari/"字符串,; 判斷方法:粗略判斷只檢索 "iphone"和"safari/"字符串,嚴(yán)格判斷則要同時包含 "mozilla/","iphone","mobile/","safari/"四個字符串 - iPhone版Opera Mobile:
特征表現(xiàn): 以"opera/"開頭,,含有"iphone"字符串,,同時含有 "opera mini/","presto/"字符串; 判斷方法:粗略判斷只檢索 "iphone"和"opera/"字符串,,嚴(yán)格判斷則要同時包含 "opera/","iphone","opera mini/","presto/"四個字符串 - 小結(jié):iPhone手機上的瀏覽器userAgent均包含"iphone"字符串
Android平臺瀏覽器系列:
- Android自帶瀏覽器(有人說其實是就chrome,,但google自己未做表示,且還在開發(fā)一個Android上運行的Chrome to Phone):
特征表現(xiàn): 以"mozilla/"開頭,,含有"android"和"linux" 字符串,,同時含有 "applewebkit/","mobile safari/"字符串; 判斷方法:因為還不知道Android上未來會不會有獨立的safari(估計不會了),,所以建議直接嚴(yán)格判斷,,檢索 "mozilla/","android","linux","applewebkit/","mobile safari/"五個字符串 - Android版Opera Mobile:
特征表現(xiàn): 以"opera/"開頭,含有"android"和"linux" 字符串,,同時含有 "opera mobi/","presto/"字符串,; 判斷方法:粗略判斷只檢索 "android"和"opera/",嚴(yán)格判斷則要同時包含"opera/","android","linux","opera mobi/","presto/"五個字符串 - Android版Firefox:
特征表現(xiàn):以"mozilla/"開頭,,含有"android"和"linux" 字符串,,同時含有 "firefox/","gecko/","fennec/"字符串; 判斷方法:粗略判斷只檢索 "android"和"firefox/",,嚴(yán)格判斷則要同時包含"mozilla/","android","linux","firefox/","gecko/","fennec/"六個字符串 - 小結(jié):Android平臺上的瀏覽器userAgent均包含"android"和"linux"字符串
以上對windows,、iphone、android三大平臺的主流瀏覽器解析就基本結(jié)束了,,其他平臺的linux估計至少與android平臺應(yīng)該類似,,而采用了Mac OS的iPad和麥金塔應(yīng)該與iphone平臺類似,故而暫時先不做解析,,也因為手頭沒有那么多設(shè)備和操作系統(tǒng)來測試,,希望日后能夠補上。
現(xiàn)在的網(wǎng)站產(chǎn)品開發(fā)要求跟以前又不一樣了,,因為不僅要滿足電腦瀏覽,,還需要滿足用戶通過智能手機(這里僅指iphone、android,、windows phone等真正的智能手機,,blackberry和palm這樣的小眾半智能系統(tǒng)暫時不考慮,至于symbian這個偽智能系統(tǒng)就一邊玩去吧)通過以上三個具有代表性的平臺,,也大致可以推測出根據(jù)瀏覽器userAgent判斷用戶設(shè)備的解決方案了,。
1、如果需要判斷操作系統(tǒng),,方法比較簡單,,在userAgent里面檢索以下字符串:
- 含有"windows nt":顯而易見了,windows操作系統(tǒng),,nt后面的版本號可以判斷OS版本,;
- 含有"mac":蘋果的Mac OS X或者其他Mac OS內(nèi)核的系統(tǒng);
- 含有"iphone":蘋果iphone手機專有的,,一般情況下也應(yīng)該含有"mac",;
- 含有"ipad":蘋果iPad平板電腦(資料表明iPad的瀏覽器userAgent同時含有"mac","iphone","ipad"),;
- 含有"linux":Linux操作系統(tǒng)或者其他以linux作為內(nèi)核的操作系統(tǒng);
- 含有"android":谷歌的Android操作系統(tǒng),,有可能是智能手機,,也有可能是安卓版的平板電腦哦,一般情況下android平臺上的userAgent也應(yīng)該包含"linux",;
- 含有"unix","sunos","bsd"三者之一:Unix系統(tǒng),,其實對這個系統(tǒng)的用戶體驗問題,目前幾乎可以不用考慮了,;
- 含有"ubuntu":ubuntu定制版的linux
- ……
你也看到了,,判斷操作系統(tǒng)及其版本其實并不一直有用,但總有能用到的地方,,比如開發(fā)專門針對iphone,、ipad、android等設(shè)備屏幕分辨率的頁面
2,、判斷瀏覽器的內(nèi)核,,方法也不困難,我自己琢磨出來的,,不一定都對?。?/div> - 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)鍵問題所在,,然而,這個兼容性問題已經(jīng)有jQuery和Extjs等框架幫你解決了,,因此這個判斷只針對個別頁面的CSS樣式在不同內(nèi)核渲染效果不同的情況下使用,,當(dāng)然了,同樣的內(nèi)核在智能手機和電腦等不同設(shè)備上渲染結(jié)果也不同,,這一點也需要注意,。
3,、判斷瀏覽器useAgent的實際應(yīng)用舉例:
- 不同瀏覽器內(nèi)核對頁面的渲染效果不同,雖然已經(jīng)有jQuery和Extjs等為我們做了兼容處理,,但是依然會有一些細(xì)小的差別需要我們單獨處理,,此時需要判斷瀏覽器內(nèi)核;
- 用戶并不僅僅是通過電腦訪問網(wǎng)站的,,隨著智能手機的日益普及還有平板電腦的大行其道,使用這兩者來上網(wǎng)的比例越來越高,,怎么辦,?平板電腦還好,屏幕大分辨率高,,智能手機受限于他的屏幕尺寸和分辨率,,雖有強勁的處理能力,也可以完美支持現(xiàn)有的網(wǎng)站,,但是為客戶多考慮一點總沒有壞處你說對吧,?畢竟通過局部縮放拖拽的方式看網(wǎng)頁很不舒服,這時呢,,我們就可以專門為iphone,、android這樣的窄條屏幕提供一個專用版本來布局了,一來提升瀏覽體驗,,二來降低網(wǎng)絡(luò)流量,,加快訪問速度;
- 做訪客流量分析,,通過判斷客戶瀏覽器類型并記錄其數(shù)量,,來優(yōu)化設(shè)計自己的網(wǎng)站,以分別提升其客戶體驗
- ……
|