2023年12月14日发(作者：)

ent浏览器检测（前端基础系列）

对于前端来说，浏览器检测已经不陌生了，在做一些页面是，需要针对不同的浏览器进行处理不同的逻辑，最简单的就是区分pc和移动

端的浏览器，或是android 和ios下的浏览器。

一、浏览器检测的由来？

在20世纪90年代初期，网景公司开发的 Netscape Navigator开始流行起来，随后便产生的浏览器大战，主要在于两大巨头之间

（Netscape/微软ie）；由于那时各家浏览器都有自己的标准，使用内核也不一样，个版本之间也存在差异（万恶的IE）；造成网页开发者需

要针对不同的浏览器进行适配。后期产生了大量的浏览器厂商，各自都拥有自己的浏览器了，但是主要内核还是还是掌握在巨头公司里；

浏览器内核及常见浏览器：

1. trident（IE内核）：IE、360安全浏览器、猎豹安全浏览器、傲游浏览器、百度浏览器

2. gecko（Firefox内核）：Mozilla FireFox(火狐浏览器)

3. webkit（苹果内核）：Safari、Chrome

其中我们国内大部分浏览器基本都是使用双内核（trident + webkit），当你开启高速模式时，就是切换使用了webkit内核；当然不能一概而

论，有些新版本使用了google研发的新的排版引擎 blink

二、ent产生？

ent最初是有网景公司的Netscape Navigator流行后，后续浏览器跟随网景公司的格式进行模仿，例如，Netscape

Navigator 3 发布不久，微软公布了它的首款 web 浏览器： IE 3，但是 Netscape 是当时首选浏览器，大多数服务器在加载页面前都会检查

user-agent 是否为该款浏览器。IE 如果不兼容Netscape user-agent 字串，使用 IE 的用户就根本打不开这些页面，于是造就了如下格式：

Mozilla/2.0 (compatible; MSIE 3.02; Windows 95)

结果就是 IE 摇身一变被识别成了 Mozilla，伪装成 Netscape Navigator，这就是如今大家查看大部分浏览器的userAgen 字段中都会

有“Mozilla/5.0”这样的字符；

三、ent 格式

因为各大浏览器厂商在进行设置 userAgent 时都有自己的小心思，导致了userAgent 的格式也非常的混乱；比如上面说到的IE，为了能让IE

用户可以访问那时火热的Netscape Navigator页面，就伪装成了Netscape；苹果公司在开发webkit 内核时，一个新的浏览器，怎么样才能破

解这个被别人占领的市场呢，那就是使用IE那一套，在userAgent中放了详细的信息，伪装成了即兼容Mozilla又兼容Gecko内核的Firefox浏

览器；

部分浏览器格式如下（PC）：

1. chrome浏览器：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94

Safari/537.36

2. IE11浏览器：Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729;

.NET CLR 3.5.30729; McAfee; rv:11.0) like Gecko

3. safari 5.1 – MAC：User-Agent:Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; en-us) AppleWebKit/534.50 (KHTML, like Gecko)

Version/5.1 Safari/534.50

4. safari 5.1 – Windows：User-Agent:Mozilla/5.0 (Windows; U; Windows NT 6.1; en-us) AppleWebKit/534.50 (KHTML, like Gecko)

Version/5.1 Safari/534.50

5. Firefox 4.0.1 – MAC：User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0.1) Gecko/20100101 Firefox/4.0.1

6. Firefox 4.0.1 – Windows：User-Agent:Mozilla/5.0 (Windows NT 6.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1

7. Opera 11.11 – MAC：User-Agent:Opera/9.80 (Macintosh; Intel Mac OS X 10.6.8; U; en) Presto/2.8.131 Version/11.11

8. Opera 11.11 – Windows：User-Agent:Opera/9.80 (Windows NT 6.1; U; en) Presto/2.8.131 Version/11.11

9. 360浏览器：User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; 360SE)

10. 搜狗浏览器 1.x：User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0; SE 2.X MetaSr 1.0; SE 2.X MetaSr 1.0;

.NET CLR 2.0.50727; SE 2.X MetaSr 1.0)

部分浏览器格式如下（移动端）：

1. iphone6：Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0

Mobile/13B143 Safari/601.1

2. ipad：Mozilla/5.0 (iPad; CPU OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143

Safari/601.1

3. Android QQ浏览器 For android：User-Agent: MQQBrowser/26 Mozilla/5.0 (Linux; U; Android 2.3.7; zh-cn; MB200 Build/GRJ22;

CyanogenMod-7) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

4. Windows Phone：User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; HTC; Titan)

5. BlackBerry：User-Agent: Mozilla/5.0 (BlackBerry; U; BlackBerry 9800; en) AppleWebKit/534.1+ (KHTML, like Gecko)

Version/6.0.0.337 Mobile Safari/534.1+

6. UC标准：User-Agent: NOKIA5700/ UCWEB7.0.2.37/28/999

四、解析userAgent进行浏览器检测　　通过观察各浏览器的userAgent字段，可以从中进行细分浏览器类型；例如：

1. PC与移动端的区分

主要是根据userAgent中包含的系统字符进行判断，比如桌面系统主要包含：windows/mac/cros/linux ; 而移动端比较复杂，不能简单

区分Android/ios，比如还有ipad/kindle/blackbary/windows phone等；具体参考中的检测方式：

var platform_match = /(ipad)/.exec( ua ) ||

/(ipod)/.exec( ua ) ||

/(windows phone)/.exec( ua ) || // 区分windows phone手机

/(iphone)/.exec( ua ) ||

/(kindle)/.exec( ua ) || // 亚马逊的 kindle

/(silk)/.exec( ua ) || // 亚马逊的 silk 浏览器

/(android)/.exec( ua ) ||

/(win)/.exec( ua ) || // windows 系统，注意必须放在 检测 windows phone 手机之后

/(mac)/.exec( ua ) ||

/(linux)/.exec( ua ) ||

/(cros)/.exec( ua ) ||

/(playbook)/.exec( ua ) || // 黑莓的 playbook浏览器

/(bb)/.exec( ua ) || // 黑莓手机

/(blackberry)/.exec( ua ) || // 黑莓手机

[];

// mobile 检测

if ( d || || erry || || ||

|| || ok || || browser[ "windows phone" ]) {

= true;

}

// pc 检测

if ( || || || ) {

p = true;

}

2. 浏览器类型检测，都是使用正则进行检测关键字，具体参考

var match = /(edge)([w.]+)/.exec( ua ) ||

/(opr)[]([w.]+)/.exec( ua ) ||

/(chrome)[ ]([w.]+)/.exec( ua ) ||

/(iemobile)[]([w.]+)/.exec( ua ) ||

/(version)(applewebkit)[ ]([w.]+).*(safari)[ ]([w.]+)/.exec( ua ) ||

/(webkit)[ ]([w.]+).*(version)[ ]([w.]+).*(safari)[ ]([w.]+)/.exec( ua ) ||

/(webkit)[ ]([w.]+)/.exec( ua ) ||

/(opera)(?:.*version|)[ ]([w.]+)/.exec( ua ) ||

/(msie) ([w.]+)/.exec( ua ) ||

f("trident") >= 0 && /(rv)(?::| )([w.]+)/.exec( ua ) ||

f("compatible") < 0 && /(mozilla)(?:.*? rv:([w.]+)|)/.exec( ua ) ||

[];

五、精准度？

　　通过userAgent判断可以区分大部分浏览器，但是少数浏览器该字段的检测会带来误区，特别是国内浏览器，开发页面时需要针对具体

的浏览器进行区分嗅探；

【参考链接】

【结束语】

系列文章，包括了原创，翻译，转载等各类型的文章；一方面是为了自己总结，另一方面页希望可以共享知识；在技术方面有输入，也要

有所输出，才能更进一步！文章基于自己的实践、阅读及理解，如有不合理及错误的地方，烦请各大佬评论指出，以便改正，感谢！