使用userAgent區分瀏覽器版本

使用userAgent區分瀏覽器版本：https://blog.csdn.net/n447194252/article/details/76255489javascript

JS根據userAgent值來判斷瀏覽器的類型及版本：https://blog.csdn.net/zheng0203/article/details/51771137html

1.前端

先附上部分瀏覽器的userAgentjava

火狐： Mozilla/5.0 (Windows NT 10.0; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0linux

谷歌： Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36android

Opera： Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36 OPR/46.0.2597.57
Opera/9.27 (Windows NT 5.2; U; zh-cn)web

Edge： Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36 Edge/15.15063正則表達式

IE 11： Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; InfoPath.3; rv:11.0) like Geckochrome

IE 10： Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Trident/6.0)
IE 9.0： Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;
IE 8.0： Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0)
IE 7.0： Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0)
IE 6.0： Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
IE 5.0： Mozilla/4.0 (compatible; MSIE 5.0; Windows NT)
大概瞭解一下
操做系統標識 ubuntu

渲染引擎
顯示瀏覽器使用的主流渲染引擎有：Gecko、WebKit、KHTML、Presto、Trident、Tasman等，格式爲：渲染引擎/版本信息

判斷瀏覽器類型
經過匹配userAgent中的字段來判斷瀏覽器類型

//取得瀏覽器的userAgent字符串
var userAgent = navigator.userAgent;
//判斷是否Opera瀏覽器
var isOpera = userAgent.indexOf("Opera") > -1 || userAgent.indexOf("OPR");
//判斷是否Edge瀏覽器
var isEdge = userAgent.indexOf("Edge") > -1;
//判斷是否Firefox瀏覽器
var isFF = userAgent.indexOf("Firefox") > -1;
//判斷是否Safari瀏覽器
var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1;
//判斷Chrome瀏覽器
var isChrome = userAgent.indexOf("Chrome") > -1 && !isEdge && !isOpera;
//判斷是否IE瀏覽器
var isIE = userAgent.indexOf("MSIE") || userAgent.indexOf("Trident");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
封裝成js方法，這裏經過順序避免了一些重複判斷

//判斷瀏覽器類型
function getBrowserType() {
var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字符串

if (userAgent.indexOf("Firefox") > -1) {
return "Firefox";
} else if (userAgent.indexOf("Edge") > -1) {
return "Edge";
} else if (userAgent.indexOf("Opera") > -1 || userAgent.indexOf("OPR") > -1) {
return "Opera";
} else if (userAgent.indexOf("Chrome") > -1) {
return "Chrome";
} else if (userAgent.indexOf("Safari") > -1) {
return "Safari";
} else if (userAgent.indexOf("MSIE") > -1 || userAgent.indexOf("Trident") > -1) {
return "IE";
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
判斷瀏覽器類型和版本
瀏覽器版本經過正則匹配獲取
以火狐瀏覽器爲例

//獲取瀏覽器及版本，match()方法返回的爲數組,此處爲["Firefox/54.0"]
var browser = userAgent.match(/firefox\/[\d.]+/gi);
//獲取主版本數值
var version = browser[0].match(/[\d]+/)[0];
return "Firefox "+version; //Firefox 54
1
2
3
4
5
整合成JS方法

//判斷瀏覽器類型和版本
function getBrowserVersion() {
var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字符串

if (userAgent.indexOf("Firefox") > -1) {
var version = userAgent.match(/firefox\/[\d.]+/gi)[0].match(/[\d]+/)[0];
return "Firefox "+version;
} else if (userAgent.indexOf("Edge") > -1) {
var version = userAgent.match(/edge\/[\d.]+/gi)[0].match(/[\d]+/)[0];
return "Edge "+version;
} else if (userAgent.indexOf("Opera") > -1 || userAgent.indexOf("OPR") > -1) {
if (userAgent.indexOf("Opera") > -1) {
var version = userAgent.match(/opera\/[\d.]+/gi)[0].match(/[\d]+/)[0];
return "Opera "+version;
}
if (userAgent.indexOf("OPR") > -1) {
var version = userAgent.match(/opr\/[\d.]+/gi)[0].match(/[\d]+/)[0];
return "Opera "+version;
}
} else if (userAgent.indexOf("Chrome") > -1) {
var version = userAgent.match(/chrome\/[\d.]+/gi)[0].match(/[\d]+/)[0];
return "Chrome "+version;
} else if (userAgent.indexOf("Safari") > -1) {
var version = userAgent.match(/safari\/[\d.]+/gi)[0].match(/[\d]+/)[0];
return "Safari "+version;
} else if (userAgent.indexOf("MSIE") > -1 || userAgent.indexOf("Trident") > -1) {
if (userAgent.indexOf("MSIE") > -1) {
var version = userAgent.match(/msie [\d.]+/gi)[0].match(/[\d]+/)[0];
return "IE "+version;
}
if (userAgent.indexOf("Trident") > -1) {
var versionTrident = userAgent.match(/trident\/[\d.]+/gi)[0].match(/[\d]+/)[0];
var version = parseInt(versionTrident) + 4;
return "IE "+version;
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
JS中正則表達式用/代替引號，/[\d]+/即爲由大於0個數字組成，gi是全局檢查，忽略大小寫。

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判斷用戶設備的解決方案了。一、若是須要判斷操做系統，方法比較簡單，在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"：谷歌的Android操做系統，有多是智能手機，也有多是安卓版的平板電腦哦，通常狀況下android平臺上的userAgent也應該包含"linux"；含有"unix","sunos","bsd"三者之一：Unix系統，其實對這個系統的用戶體驗問題，目前幾乎能夠不用考慮了；含有"ubuntu"：ubuntu定製版的linux……你也看到了，判斷操做系統及其版本其實並不一直有用，但總有能用到的地方，好比開發專門針對iphone、ipad、android等設備屏幕分辨率的頁面二、判斷瀏覽器的內核，方法也不困難，我本身琢磨出來的，不必定都對啊：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樣式在不一樣內核渲染效果不一樣的狀況下使用，固然了，一樣的內核在智能手機和電腦等不一樣設備上渲染結果也不一樣，這一點也須要注意。三、判斷瀏覽器useAgent的實際應用舉例：不一樣瀏覽器內核對頁面的渲染效果不一樣，雖然已經有jQuery和Extjs等爲咱們作了兼容處理，可是依然會有一些細小的差異須要咱們單獨處理，此時須要判斷瀏覽器內核；用戶並不只僅是經過電腦訪問網站的，隨着智能手機的日益普及還有平板電腦的大行其道，使用這二者來上網的比例愈來愈高，怎麼辦？平板電腦還好，屏幕大分辨率高，智能手機受限於他的屏幕尺寸和分辨率，雖有強勁的處理能力，也能夠完美支持現有的網站，可是爲客戶多考慮一點總沒有壞處你說對吧？畢竟經過局部縮放拖拽的方式看網頁很不舒服，這時呢，咱們就能夠專門爲iphone、android這樣的窄條屏幕提供一個專用版原本佈局了，一來提高瀏覽體驗，二來下降網絡流量，加快訪問速度；作訪客流量分析，經過判斷客戶瀏覽器類型並記錄其數量，來優化設計本身的網站，以分別提高其客戶體驗<script type="text/javascript">var Sys = {};var ua = navigator.userAgent.toLowerCase();var s;(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;//如下進行測試if (Sys.ie) document.write('IE: ' + Sys.ie);if (Sys.firefox) document.write('Firefox: ' + Sys.firefox);if (Sys.chrome) document.write('Chrome: ' + Sys.chrome);if (Sys.opera) document.write('Opera: ' + Sys.opera);if (Sys.safari) document.write('Safari: ' + Sys.safari);</script>或: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)};})();