user-Agent是什么？如何获取浏览器版本和类型？

什么是user-Agent

User-Agent 首部包含了一个特征字符串，用来让网络协议的对端来识别发起请求的用户代理软件的应用类型、操作系统、软件开发商以及版本号 --MDN

user-Agent常用格式

打开chrome控制台，输入window.navigator.userAgent

// 手机模拟器模式
Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1
// 正常模式
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.89 Safari/537.36

可以看到user-Agent的格式通常格式：

Mozilla/5.0 (平台信息) 引擎版本 浏览器类型与版本

Mozilla/5.0

关于Mozilla的可以看看知乎的这个问题

为什么所有主要浏览器的 User-Agent 都是 Mozilla/x.0 开头？

平台信息

由多个字符串组成，用英文分号隔开，表示设备的系统信息

常见平台信息

// windows
Windows NT 10.0 // 如 Windows 10
Win64; x64 // Win64 on x64
WOW64 // Win32 on x64

// Linux
X11; Linux i686; // Linux 桌面，i686 版本

// Mac
Macintosh; Intel Mac OS X 10_9_0 // Intel x86 或者 x86_64

// Android,例如小米的
Linux; U; Android 10; zh-cn; MI 9 Build/QKQ1.190825.002

// iphone
iPhone; CPU iPhone OS 13_3_1 like Mac OS X

...

所以可以通过排除windows,linux和mac来确定设备类型是否是移动设备

引擎版本

这部分声明的是浏览器的内核，众所周知，常见的浏览器内核分为以下几种：

IE: Trident
Chrome: 开始Webkit,后改成Chromium/Blink
Firefox: Gecko
Safari: Webkit
Opera: Presto

思否这篇文章介绍的非常详细，可以参考一下：主流浏览器内核

为什么有(KHTML, like Gecko)

内核Webkit包含了一个排版引擎叫WebCore，而WebCore是KHTML衍生而来的。 Chrome希望能得到为Safari编写的网页，于是决定装成Safari，Safari使用了WebKit渲染引擎，而WebKit呢又伪装自己是KHTML，KHTML呢又是伪装成Gecko的

浏览器类型与版本

见下文

根据`userAgent`判断浏览器类型与版本

pc端还是移动端

根据userAgent的设备信息，排除windows,linux和mac，剩余的就是移动设备。移动设备主要是用正则判断Iphone还是Android即可

pc浏览器类型

参考

浏览器类型	匹配关键字
IE 10及以下	`/msie ([\d\.]+)/`
IE 11及以上	`/rv:([\d.]+) like Gecko/`
edge	`/edge\/([\d\.]+)/`
Firefox	`/firefox\/([\d\.]+)/`
Opera	`/(?:opera\|opr).([\d\.]+)/`
chrome	`/chrome\/([\d\.]+)/`
safari	`/version\/([\d\.]+).*safari/`

代码

获取版本和型号

function getExplore(){
  var Sys = {};  
  var ua = navigator.userAgent.toLowerCase();  
  var s;  
  (s = ua.match(/rv:([\d.]+)\) like gecko/)) ? Sys.ie = s[1] :
  (s = ua.match(/msie ([\d\.]+)/)) ? Sys.ie = s[1] :  
  (s = ua.match(/edge\/([\d\.]+)/)) ? Sys.edge = s[1] :
  (s = ua.match(/firefox\/([\d\.]+)/)) ? Sys.firefox = s[1] :  
  (s = ua.match(/(?:opera|opr).([\d\.]+)/)) ? Sys.opera = s[1] :  
  (s = ua.match(/chrome\/([\d\.]+)/)) ? Sys.chrome = s[1] :  
  (s = ua.match(/version\/([\d\.]+).*safari/)) ? Sys.safari = s[1] : 0;  
  // 根据关系进行判断
  if (Sys.ie) return ('IE: ' + Sys.ie);  
  if (Sys.edge) return ('EDGE: ' + Sys.edge);
  if (Sys.firefox) return ('Firefox: ' + Sys.firefox);  
  if (Sys.chrome) return ('Chrome: ' + Sys.chrome);  
  if (Sys.opera) return ('Opera: ' + Sys.opera);  
  if (Sys.safari) return ('Safari: ' + Sys.safari);
  return 'Unkonwn';
}

那要区分不同手机端的浏览器呢

看看这个库ua-device