JS は userAgent 属性と javascript スキルを分析してブラウザの種類とバージョンを判断します。

JavaScript はフロントエンド開発の主な言語です。JavaScript プログラムを作成することでブラウザの種類とバージョンを決定できます。 JavaScript がブラウザの種類を判断するには、通常 2 つの方法があります。1 つはさまざまなブラウザの固有の属性に基づくもので、もう 1 つはブラウザの userAgent 属性を分析することで判断されます。この記事では、ブラウザの userAgent 特性を分析し、その判断方法を示します:

Windows オペレーティング システム ブラウザ シリーズ:

IE ブラウザ シリーズ:
特性パフォーマンス: すべてに基づいています。 " で始まります。 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/" の 4 つの文字列;
Windows 版 Chrome:
特徴: "mozilla/x.0" から始まり、"windows nt"、"chrome/" を含み、また"applewebkit/" ,"safari/";
判定方法：大まかな判定は「windows nt」と「chrome/」の文字列のみ検索可能、厳密判定は「mozilla/」「windows nt」「applewebkit/」を検索可能、「safari/」、「chrome/」の 5 つの文字列;
Opera for Windows:
特徴: 「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 system all には、Windows オペレーティング システムを表す「windows nt」文字列が含まれています。

iPhone プラットフォーム ブラウザ シリーズ:

iPhone には safari が付属しています:
特徴: 「mozilla/」で始まり、文字列「iphone」を含み、「mobile/」、「」も含まれます。 safari/" string;
判定方法：大まかな判定は「iphone」と「safari/」の文字列のみを検索、厳密判定は「mozilla/」、「iphone」、「mobile/」、「safari」/「4つ」を含む必要がある文字列
Opera Mobile for iPhone:
特徴: "opera/" で始まり、文字列 "iphone" を含み、文字列 "opera mini/" と "presto/" を含む
判定方法:粗判定では文字列「iphone」と「opera/」のみが取得されますが、厳密判定では「opera/」、「iphone」、「opera mini/」、「presto/」の 4 つの文字列が含まれている必要があります
概要: ブラウザ userAgent iPhone にはすべて「iphone」という文字列が含まれています

Android プラットフォームのブラウザ シリーズ:

Android 独自のブラウザ (実際には Chrome であるという人もいますが、Google 自体は何の表明もしておらず、現在もそのままです) Android 上で実行される Chrome to Phone の開発):
特徴: "mozilla/" で始まり、"android" と "linux" の文字列が含まれ、さらに "applewebkit/" 、 "mobile safari/" の文字列も含まれます。判断方法: Android 上で独立した safari が将来的に存在するかどうかはまだわかりません (おそらく存在しない) ため、厳密に直接判断して、「mozilla/」、「android」、「linux」、 「applewebkit/」、「mobile safari/」 5 つの文字列
Opera Mobile for Android:
特徴: 「opera/」で始まり、「android」および「linux」の文字が含まれる 「opera mobi/」および「」を含む文字列presto/" strings;
判定方法：大まかな判定は「android」と「opera/」のみを検索、厳密判定は「opera/」と「android」、「linux」、「opera mobi/」、「presto」の両方が必要/" 5 つの文字列
Android 版 Firefox:
特徴: 「mozilla/」で始まり、「android」および「linux」の文字列が含まれます。「firefox/」、「gecko/」、「fennec/」の文字列が含まれます。同時に;
判定方法：大まかな判定は「android」と「firefox/」のみを検索、厳密判定は「mozilla/」、「android」、「linux」、「firefox/」、「gecko/」の両方が必要、「fennec/」 6 つの文字列
要約: Android プラットフォームのブラウザ userAgent には、「android」と「linux」の文字列が含まれています

上記の Windows、iPhone の 3 つの主要プラットフォームの主流ブラウザの分析、そして Android は基本的に終わりました。他のプラットフォームの Linux は少なくとも Android プラットフォームと同様であると推定されますが、Mac OS を使用する iPad と Macintosh は iPhone プラットフォームと同様であるはずです。そのため、今回は分析を行いません。なぜなら、テストするデバイスやオペレーティング システムがそれほど多くないからです。将来的にはそれを補うことができればと思っています。

今日の Web サイトの製品開発要件は以前とは異なり、コンピューターの閲覧を満たすだけでなく、スマートフォン (ここでは iPhone、Android、Windows Phone、Blackberry などの実際のスマートフォンのみを指します) を通じてユーザーを満足させる必要があるためです。 Palm のようなニッチな半インテリジェント システムについては当面考慮しません。疑似インテリジェント システムである Symbian については、それを試してみましょう。) 上記の 3 つの代表的なプラットフォームを通じて、解決策を大まかに推測することもできます。ブラウザ userAgent に基づくユーザーデバイス。

1. If you need to determine the operating system, the method is relatively simple. Search the following string in userAgent:

Contains "windows nt": Obviously, the windows operating system, the version number after nt You can determine the OS version;
Contains "mac": Apple's Mac OS ;
Contains "ipad": Apple iPad tablet computer (data shows that the iPad's browser userAgent also contains "mac", "iphone", "ipad");
Contains "linux": Linux operating system or other Linux is the kernel operating system;
contains "android": Google's Android operating system, which may be a smartphone or an Android version of a tablet. Generally, the userAgent on the android platform should also contain "linux" ";
contains one of "unix", "sunos", and "bsd": Unix system. In fact, the user experience of this system can be almost ignored at present;
contains "ubuntu": ubuntu Customized version of linux
...

You have also seen that it is not always useful to determine the operating system and its version, but there are always places where it can be used, such as development specifically for iPhone, iPad, and Android Wait for the page with the device screen resolution

2. The method to determine the browser kernel is not difficult. I figured it out myself, but it may not always be correct:

IE (Trident) kernel ( Needless to say, IE for Mac, IEs4Linux and the like, only those under windows are considered): starting with "mozilla/", containing "windows nt" and "msie" strings;
Firefox (Gecko) kernel: starting with " It starts with mozilla/" and contains the strings "firefox/" and "gecko/". The Android version also has the string "fennec/";
Opera () kernel: starts with "opera/", Contains the string "presto/", the iPhone version also has "opera mini/", and the Android version also has "opera mobi/";
Webkit core: starts with "mozilla/" and contains "applewebkit/" and "safari/" string, the one with "chrome/" is the Chrome browser, and the one without it is Safari or others;
The above is the main browser kernel

The browser kernel is The key issue to solve the compatibility problem is, however, this compatibility issue has been solved for you by frameworks such as jQuery and Extjs. Therefore, this judgment is only used when the CSS styles of individual pages have different rendering effects in different kernels. Of course, The same kernel will render different results on different devices such as smartphones and computers, which also needs to be noted.

3. Examples of practical applications for judging browser useAgent:

Different browser kernels have different rendering effects on pages. Although jQuery and Extjs have done compatibility processing for us, there are still There will be some small differences that we need to deal with separately. At this time, we need to judge the browser kernel;
Users do not only access websites through computers. With the increasing popularity of smartphones and the popularity of tablets, using these two The proportion of Internet users is getting higher and higher. What should I do? Tablets are okay, with large screens and high resolutions. Smartphones are limited by their screen size and resolution. Although they have strong processing power and can perfectly support existing websites, it never hurts to think more about your customers. Right? After all, it is very uncomfortable to view web pages through partial zoom and drag. At this time, we can provide a dedicated version for layout for narrow screens such as iPhone and Android. First, it can improve the browsing experience, and second, it can reduce network traffic. , to speed up access;
Do visitor traffic analysis, optimize and design your own website by determining customer browser types and recording their numbers, to improve their customer experience respectively

Copy code The code is as follows:

or:
Browser detection method in the source code of KindEditor open source editor:
KE = {};
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)
};
})();