使用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是全局检查，忽略大小写。
2.
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)};})();