JS determines the type and version of the browser by analyzing the userAgent attribute_javascript skills

JavaScript is the main language for front-end development. We can determine the type and version of the browser by writing JavaScript programs. There are generally two ways for JavaScript to determine the browser type. One is based on the unique attributes of various browsers, and the other is determined by analyzing the userAgent attribute of the browser. This article analyzes the userAgent characteristics of browsers and gives a judgment method:

Windows operating system browser series:

IE browser series:
Characteristic performance: all are based on It starts with "mozilla/", and the x.0 (compatibal; msie x.0; windows nt", but this is generally not necessary
Firefox for Windows:
Features: starting with "mozilla/x.0", including "windows nt"," gecko/" and "firefox/";
Judgment method: rough judgment can only search for "firefox/" and "windows nt" strings, strict judgment can search "mozilla/", "windows nt", "gecko/" and "firefox/" four strings;
Chrome for Windows:
Characteristics: starting with "mozilla/x.0", including "windows nt", "chrome/", and also including "applewebkit/" ,"safari/";
Judgment method: rough judgment can only search "windows nt" and "chrome/" strings, strict judgment can search "mozilla/", "windows nt", "applewebkit/"," safari/", "chrome/" five strings;
Opera for Windows:
Characteristics: starting with "opera/" and containing "windows nt", "presto/" strings;
Judgment Method: Roughly judge to retrieve only "windows nt" and "opera/" strings, strictly judge to retrieve "opera/", "windows nt" and "presto/" at the same time;
Safari for Windows:
Feature performance: It starts with "mozilla/" and contains "windows nt", "applewebkit/", "safari/";
Judgment method: Rough judgment can be made by searching for "windows nt", "safari/" but not "chrome/" ", strict judgment needs to contain "mozilla/", "windows nt", "applewebkit/", "safari/" but not "chrome/";
Summary: The browser userAgent on the Windows operating system all contains " windows nt" string to represent the windows operating system.

iPhone platform browser series:

iPhone comes with safari:
Characteristics: starting with "mozilla/", containing the string "iphone", and also containing "mobile/", "safari/" string;
Judgment method: Rough judgment only searches for "iphone" and "safari/" strings, strict judgment must include "mozilla/", "iphone", "mobile/", "safari" /"Four strings
Opera Mobile for iPhone:
Characteristics: Starting with "opera/", containing the string "iphone", and also containing the strings "opera mini/" and "presto/";
Judgment method: Rough judgment only retrieves the strings "iphone" and "opera/", strict judgment must include the four strings "opera/", "iphone", "opera mini/", "presto/"
Summary: The browser userAgent on the iPhone all contains the "iphone" string

Android platform browser series:

Android's own browser (some people say it is actually chrome, but Google itself has not made any representation, and is still developing a Chrome to Phone running on Android):
Characteristics: Starting with "mozilla/", containing "android" and "linux" strings, and also containing "applewebkit/" , "mobile safari/" string;
Judgment method: Because we still don’t know whether there will be an independent safari on Android in the future (probably not), it is recommended to judge strictly directly and search for "mozilla/", "android ","linux","applewebkit/","mobile safari/" five strings
Opera Mobile for Android:
Characteristics: Starting with "opera/", containing "android" and "linux" characters String containing "opera mobi/" and "presto/" strings;
Judgment method: rough judgment only searches for "android" and "opera/", strict judgment requires both "opera/" and "android" , "linux", "opera mobi/", "presto/" five strings
Firefox for Android:
Characteristics: starting with "mozilla/", containing "android" and "linux" strings, Contains "firefox/", "gecko/", "fennec/" strings at the same time;
Judgment method: rough judgment only searches for "android" and "firefox/", strict judgment requires both "mozilla/"," android", "linux", "firefox/", "gecko/", "fennec/" six strings
Summary: The browser userAgent on the Android platform contains the "android" and "linux" strings

The above analysis of mainstream browsers for the three major platforms of windows, iPhone, and Android is basically over. Linux on other platforms is estimated to be at least similar to the Android platform, while iPad and Macintosh using Mac OS should be similar to the iPhone platform Similar, so I won’t do the analysis for the time being, because I don’t have so many devices and operating systems to test on. I hope I can make up for it in the future.

Today’s website product development requirements are different from before, because they must not only satisfy computer browsing, but also need to satisfy users through smartphones (here only refers to real smartphones such as iPhone, Android, Windows Phone, Blackberry We will not consider niche semi-intelligent systems such as Palm for the time being. As for the pseudo-intelligent system Symbian, let’s play with it.) Through the above three representative platforms, we can also roughly speculate on the solution to determine the user device based on the browser userAgent. .

1、如果需要判斷作業系統，方法比較簡單，在userAgent裡面檢索以下字串：

含有"windows nt"：顯而易見了，windows作業系統，nt後面的版本號可以判斷OS版本；
含有"mac"：蘋果的Mac OS X或其他Mac OS核心的系統；
含有"iphone"：蘋果iphone手機專有的，一般情況下也應該含有"mac" ；
含有"ipad"：蘋果iPad平板電腦（資料顯示iPad的瀏覽器userAgent同時含有"mac","iphone","ipad"）；
含有"linux"：Linux作業系統或其他以linux作為核心的作業系統；
含有"android"：Google的Android作業系統，有可能是智慧型手機，也有可能是安卓版的平板電腦哦，一般情況下android平台上的userAgent也應該包含"linux ";
含有"unix","sunos","bsd"三者之一：Unix系統，其實對這個系統的使用者體驗問題，目前幾乎可以不用考慮了；
含有"ubuntu"：ubuntu客製版的linux
……

你也看到了，判斷作業系統及其版本其實並不一直有用，但總有能用到的地方，比如開發專門針對iphone、ipad、android等設備螢幕解析度的頁面

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

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

瀏覽器內核才是解決相容性的關鍵問題所在，然而，這個相容性問題已經有jQuery和Extjs等框架幫你解決了，因此這個判斷只針對個別頁面的CSS樣式在不同核心渲染效果不同的情況下使用，當然了，同樣的核心在智慧型手機和電腦等不同裝置上渲染結果也不同，這一點也需要注意。

3、判斷瀏覽器useAgent的實際應用舉例：

不同瀏覽器內核對頁面的渲染效果不同，雖然已經有jQuery和Extjs等為我們做了相容處理，但是依然會有一些細小的差別需要我們單獨處理，此時需要判斷瀏覽器內核；
用戶並不僅僅是透過電腦訪問網站的，隨著智慧型手機的日益普及還有平板電腦的大行其道，使用這兩者來上網的比例越來越高，怎麼辦？平板電腦還好，螢幕大分辨率高，智慧型手機受限於他的螢幕尺寸和分辨率，雖有強勁的處理能力，也可以完美支持現有的網站，但是為客戶多考慮一點總沒有壞處你說對吧？畢竟透過局部縮放拖曳的方式看網頁很不舒服，這時呢，我們就可以專門為iphone、android這樣的窄條屏幕提供一個專用版本來佈局了，一來提升瀏覽體驗，二來降低網絡流量，加快訪問速度；
做訪客流量分析，透過判斷客戶瀏覽器類型並記錄其數量，來優化設計自己的網站，以分別提升其客戶體驗

複製程式碼 程式碼如下:

或:
KindEditor開源編輯器原始碼中的偵測瀏覽器的方法:
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)
};

})();