JS透過分析userAgent屬性來判斷瀏覽器的類型及版本_javascript技巧

JavaScript是前端開發的主要語言，我們可以透過編寫JavaScript程式來判斷瀏覽器的類型及版本。 JavaScript判斷瀏覽器類型一般有兩種辦法，一種是根據各種瀏覽器獨有的屬性來分辨，另一種是透過分析瀏覽器的userAgent屬性來判斷的。本文對瀏覽器各自的userAgent特點做一分析，並給出判斷方法：

Windows作業系統瀏覽器系列：

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

iPhone平台瀏覽器系列：

iPhone自帶safari：
特徵表現：以"mozilla/"開頭，含有"iphone"字串，同時含有"mobile/", "safari/"字串；
判斷方法：粗略判斷只檢索"iphone"和"safari/"字串，嚴格判斷則要同時包含"mozilla/","iphone","mobile/","safari /"四個字串
iPhone版Opera Mobile：
特徵表現：以"opera/"開頭，含有"iphone"字串，同時含有"opera mini/","presto/"字串；
判斷方法：粗略判斷只檢索"iphone"和"opera/"字串，嚴格判斷則要同時包含"opera/","iphone","opera mini/","presto/"四個字串
小結：iPhone手機上的瀏覽器userAgent皆包含"iphone"字串

Android平台瀏覽器系列：

Android自備瀏覽器（有人說其實是就chrome，但google自己也沒有做表示，而且還在開發一個Android上運行的Chrome to Phone）：
特徵表現： 以"mozilla/"開頭，含有"android"和"linux" 字符串，同時含有"applewebkit/" ,"mobile safari/"字串；
判斷方法：因為還不知道Android上未來會不會有獨立的safari（估計不會了），所以建議直接嚴格判斷，檢索"mozilla/","android ","linux","applewebkit/","mobile safari/"五個字串
Android版Opera Mobile：
特徵表現： 以"opera/"開頭，含有"android"和"linux" 字符串，同時含有"opera mobi/","presto/"字串；
判斷方法：粗略判斷只檢索"android"和"opera/"，嚴格判斷則要同時包含"opera/","android" ,"linux","opera mobi/","presto/"五個字串
Android版Firefox：
特徵表現：以"mozilla/"開頭，含有"android"和"linux" 字串，同時含有"firefox/","gecko/","fennec/"字串；
判斷方法：粗略判斷只檢索"android"和"firefox/"，嚴格判斷則要同時包含"mozilla/"," android","linux","firefox/","gecko/","fennec/"六個字串
小結：Android平台上的瀏覽器userAgent皆包含"android"和"linux"字串

以上對windows、iphone、android三大平台的主流瀏覽器解析就基本結束了，其他平台的linux估計至少與android平台應該類似，而採用了Mac OS的iPad和麥金塔應該與iphone平台類似，故而暫時先不做解析，也因為手邊沒有那麼多設備和作業系統來測試，希望日後能補上。

現在的網站產品開發要求跟以前又不一樣了，因為不僅要滿足電腦瀏覽，還需要滿足用戶透過智慧型手機（這裡僅指iphone、android、windows phone等真正的智慧型手機，blackberry和palm這樣的小眾半智能係統暫時不考慮，至於symbian這個偽智能係統就一邊玩去吧）通過以上三個具有代表性的平台，也大致可以推測出根據瀏覽器userAgent判斷用戶設備的解決方案了。

1. オペレーティング システムを特定する必要がある場合、方法は比較的簡単です。userAgent で次の文字列を検索します。

Contains "windows nt": 明らかに、Windows オペレーティング システムです。 nt の後のバージョン番号 OS のバージョンを決定できます。
「mac」が含まれる: Apple の Mac OS ;
「ipad」が含まれる: Apple iPad タブレット コンピューター (データは、iPad のブラウザ userAgent にも「mac」が含まれていることを示しています) iphone"、"ipad");
「linux」が含まれる: Linux オペレーティング システムまたはその他の Linux はカーネル オペレーティング システムです。
「android」が含まれる: Google の Android オペレーティング システム (スマートフォンまたは Android バージョンの場合があります)一般に、Android プラットフォームの userAgent には、「linux」「;
「unix」、「sunos」、「bsd」のいずれかが含まれます: Unix システム。実際、これのユーザー エクスペリエンスはシステムは現時点ではほとんど無視できます。
には "ubuntu" が含まれています: ubuntu カスタマイズされた linux バージョン
...

また、オペレーティング システムとそのオペレーティング システムを判断することが常に有用であるとは限らないこともわかりました。バージョンは異なりますが、iPhone、iPad、Android 専用の開発など、使用できる場所は必ずあります。デバイスの画面解像度でページが表示されるまで待ちます。

2. ブラウザーのカーネルを決定する方法は、私は自分でそれを理解しましたが、必ずしも正しいとは限りません:

IE (Trident) カーネル (言うまでもなく、IE for Mac、IEs4Linux など。Windows 上のもののみが考慮されます): 開始
Firefox (Gecko) カーネル: 「mozilla/」で始まり、文字列「firefox/」と「gecko/」が含まれます。 Android バージョンには文字列「fennec/」もあります。
Opera () kernel: 「opera/」で始まり、文字列「presto/」が含まれます。iPhone バージョンには「opera mini/」もあり、Android バージョンにもあります。 「opera mobi/」がある;
Webkit コア: 「mozilla/」で始まり、「applewebkit/」と「safari/」の文字列が含まれます。「chrome/」が付いているものが Chrome ブラウザで、付いていないものが Chrome ブラウザです。 Safari など;
上記はメインのブラウザ カーネルです

ブラウザ カーネルは、互換性の問題を解決するための重要な問題ですが、この互換性の問題は jQuery やその他のフレームワークによって解決されています。 Extjs. したがって、この判断は、個々のページの CSS スタイルが異なるカーネルで異なるレンダリング効果を持つ場合にのみ使用されます。当然、同じカーネルでもスマートフォンやコンピューターなどの異なるデバイスでは異なる結果が表示されることにも注意する必要があります。

3. ブラウザーの使用エージェントを判断するための実際のアプリケーションの例:

ブラウザー カーネルが異なれば、ページ上のレンダリング効果も異なります。jQuery と Extjs は互換性処理を行ってくれましたが、今後も互換性処理が行われます。現時点では、ブラウザのカーネルを判断する必要があります。
ユーザーは、スマートフォンとタブレットの人気が高まっているため、これら 2 つを使用して Web サイトにアクセスするだけではありません。インターネット利用者の割合はますます高くなっていますが、どうすればよいでしょうか?大きな画面と高解像度を備えたタブレットでも問題ありません。スマートフォンは、強力な処理能力を備え、既存の Web サイトを完全にサポートできますが、顧客のことをもっと考えて損はありません。結局のところ、部分的なズームやドラッグを使用して Web ページを表示するのは非常に不快です。現時点では、iPhone や Android などの狭い画面向けのレイアウト専用のバージョンを提供できます。第一に、ブラウジング エクスペリエンスを向上させることができます。ネットワーク トラフィックを削減し、アクセスを高速化します。
顧客のブラウザの種類を特定し、その数を記録することで、訪問者のトラフィックを分析し、独自の Web サイトを最適化して設計し、それぞれの顧客エクスペリエンスを向上させます。

コードをコピーします コードは次のとおりです。

または:
KindEditor オープンソースエディターのソースコード内のブラウザー検出メソッド:
KE = {}; browser = (function () {
var ua = navigator.userAgent.toLowerCase();
return {
VERSION:ua.match(/(msie|firefox|webkit|opera)[/:s] (d )/) RegExp .$2 : "0",
IE:(ua.indexOf("msie") > -1 && ua.indexOf("opera") == -1),
GECKO:(ua.indexOf( "gecko") > -1 && ua.indexOf("khtml") == -1),
WEBKIT:(ua.indexOf("applewebkit") > -1),
OPERA:(ua .indexOf("opera") > -1)
}
})();