看到标题，大家就能想起这个需求在很多项目上都能用到。我们部署在Web服务器上的前端应用，既可以用PC浏览器访问，也可以用手机浏览器访问，再加上现在智能设备的推广，我们甚至能在车载系统、穿戴设备和电视平台上访问。
设备的多样化让用户无处不在，有时候我们需要根据不同的浏览器运行环境做出对应的处理。浏览器是JavaScript的承载体，我们可以从浏览器上获取相关的信息，来进一步处理我们的业务逻辑。
然而浏览器品牌众多，有些浏览器使用的标准也不太一样，造就了难以统一的判断。下面我大概罗列一下常用的浏览器品牌和在什么情况下使用浏览器运行环境判断。浏览器相关统计数据可以参考这里。
国际五大浏览器品牌：按照全球使用率降序排列
Google Chrome：Windows、OSX、Linux、Android、iOS
Apple Safari：OSX、iOS
Mozilla Firefox：Windows、OSX、Linux、Android、iOS
ASA Opera：Windows、OSX、Linux、Android、iOS
Microsoft Internet Explorer或Microsoft Edge：Windows
国产常用浏览器品牌：按照国内使用率降序排列，普遍基于开源项目Chromium进行开发
微信浏览器
QQ浏览器
UC浏览器
2345浏览器
搜狗浏览器
猎豹浏览器
遨游浏览器
百度浏览器：百度在2019年04月30日宣布停止服务
其他浏览器：很多很多，数不清，我就不列出来了
顺便吐槽一下这个不要脸的红芯浏览器，明明就是基于Chromium进行二次开发再套多一层外壳，还非得说自己开发的浏览器是世界第五大浏览器，偷吃不抹嘴，还是被眼尖的网友发现了。。。。
使用场景
判断用户浏览器是桌面端还是移动端，显示对应的主题样式
判断用户浏览器是Android端还是iOS端，跳转到对应的App下载链接
判断用户浏览器是微信端还是H5端，调用微信分享或当前浏览器分享
获取用户浏览器的内核和载体，用于统计用户设备平台分布区间
获取用户浏览器的载体版本，用于提示更新信息
其实还有很多使用场景，就不一一举例了
原理
针对处理一个这样的使用场景，其实有一个比较专业的名字，叫做浏览器指纹。我们上面谈到的需求也只是浏览器指纹方案里面的一小部分，而我们需要使用到的浏览器指纹就是UserAgent。
这个UserAgent是何方神圣呢，中文翻译过来就是用户代理。引用百度的定义，就是一个特殊字符串头，使得服务器能够识别客户使用的操作系统及版本、CPU类型、浏览器载体及版本、浏览器渲染引擎、浏览器语言、浏览器插件等。而这些信息也足够我们去判断浏览器运行环境了。
准备
目前网上很多解决方法都只是针对系统是否是桌面端还是移动端，Android端还是iOS端，部分浏览器载体的判断和获取等等，没有一个比较完美或者终极的解决方案。
因此我用了很多测试平台整理出一个比较全面的解决方案。这个方案包含浏览器系统及版本、浏览器平台、浏览器内核及版本、浏览器载体及版本、浏览器外壳及版本。
而此方案也是基于navigator.userAgent获取相关浏览器信息(如下)，再通过系统、平台、内核、载体、外壳的特有字段进行归类统一，整理出一个完整的浏览器运行环境。
const ua = navigator.userAgent.toLowerCase(); // 输出 "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1"
浏览器信息：权重按照以下降序排列
浏览器系统：所运行的操作系统，包含Windows、OSX、Linux、Android、iOS
浏览器平台：所运行的设备平台，包含Desktop桌面端、Mobile移动端
浏览器内核：浏览器渲染引擎，包含Webkit、Gecko、Presto、Trident
浏览器载体：五大浏览器品牌，包含Chrome、Safari、Firefox、Opera、Iexplore/Edge
浏览器外壳：基于五大浏览器品牌的内核进行开发，再套一层自研技术的外壳，如国内众多浏览器品牌
获取UserAgent是否包含字段：判断是否包含系统、平台、内核、载体、外壳的特有字段
const testUa = regexp => regexp.test(ua);
获取UserAgent对应字段的版本
const testVs = regexp => (ua.match(regexp) + "").replace(/[^0-9|_.]/ig, "").replace(/_/ig, ".");
方案