navigator.userAgent浏览器检测（前端基础系列）

时间：2023-03-08 15:22:58
navigator.userAgent浏览器检测（前端基础系列）

对于前端来说，浏览器检测已经不陌生了，在做一些页面是，需要针对不同的浏览器进行处理不同的逻辑，最简单的就是区分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

二、navigator.userAgent产生？
      navigator.userAgent最初是有网景公司的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”这样的字符；

三、navigator.userAgent 格式

因为各大浏览器厂商在进行设置 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等；具体参考browser.js中的检测方式：
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 ( browser.android || browser.bb || browser.blackberry || browser.ipad || browser.iphone ||

      browser.ipod || browser.kindle || browser.playbook || browser.silk || browser[ "windows phone" ]) {

      browser.mobile = true;

    }

    // pc 检测

     if ( browser.cros || browser.mac || browser.linux || browser.win ) {

      browser.desktop = true;

    }
  1. 浏览器类型检测，都是使用正则进行检测关键字，具体参考 browser.js
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 ) ||

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

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

      [];

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

【参考链接】

　　①、browser.js : https://cdn.bootcss.com/jquery-browser/0.1.0/jquery.browser.js

　　②、简书（常用浏览器的useragent）：http://www.jianshu.com/p/126080096801

【结束语】

系列文章，包括了原创，翻译，转载等各类型的文章；一方面是为了自己总结，另一方面页希望可以共享知识；在技术方面有输入，也要有所输出，才能更进一步！文章基于自己的实践、阅读及理解，如有不合理及错误的地方，烦请各大佬评论指出，以便改正，感谢！

相关文章