JavaScript通过User Agent判断微信、QQ等常用浏览器

前言

在进行H5页面开发时，常需在微信、QQ、微博等生态内执行引流操作，但各平台对此类行为存在限制。例如前文《H5唤醒App实现及注意事项》即为应对限制的一种折中方案。本文将具体解析这些常用浏览器的User Agent特征及其判断方法。

User Agent定义

User Agent（简称UA）是一个特殊字符串头部字段，服务器借此识别客户端的操作系统及版本、CPU类型、浏览器及版本、渲染引擎、语言及插件等信息，参考自百度百科定义。

由此可见，通过UA可以获取用户使用的操作系统、版本、CPU类型、浏览器及其版本等关键信息。

常见的几个浏览器UA

此处仅列举微信、微博、QQ等浏览器的UA，其他浏览器暂未获取。如有补充，欢迎私信或留言评论。

安卓

安卓端测试设备为华为Honor V9 Play，系统版本Android 7.0，EMUI版本5.1。

QQ浏览器

• UA：mozilla/5.0 (linux; u; android 7.0; zh-cn; jmm-al10 build/honorjmm-al10) applewebkit/537.36 (khtml, like gecko) version/4.0 chrome/66.0.3359.126 mqqbrowser/9.6 mobile safari/537.36
• Version：9.6.0.5170

QQ

• UA：mozilla/5.0 (linux; android 7.0; jmm-al10 build/honorjmm-al10; wv) applewebkit/537.36 (khtml, like gecko) version/4.0 chrome/62.0.3202.84 mobile safari/537.36 v1_and_sq_8.1.0_1232_yyb_d qq/8.1.0.4150 nettype/wifi webp/0.4.1 pixel/720 statusbarheight/49 simpleuiswitch/0
• Version：8.1.0.4150

微信

• UA：mozilla/5.0 (linux; android 7.0; jmm-al10 build/honorjmm-al10; wv) applewebkit/537.36 (khtml, like gecko) version/4.0 chrome/66.0.3359.126 mqqbrowser/6.2 tbs/044807 mobile safari/537.36 mmwebid/4093 micromessenger/7.0.6.1460(0x27000634) process/tools nettype/wifi language/zh_cn
• Version：7.0.6

微博

• UA：mozilla/5.0 (linux; android 7.0; jmm-al10 build/honorjmm-al10; wv) applewebkit/537.36 (khtml, like gecko) version/4.0 chrome/62.0.3202.84 mobile safari/537.36 weibo (huawei-jmm-al10__weibo__9.8.0__android__android7.0)
• Version：9.8.0

苹果

苹果端测试设备为iPhone 6s Plus，系统版本iOS 12.4。

QQ浏览器

• UA：mozilla/5.0 (iphone; cpu iphone os 12_4 like mac os x) applewebkit/605.1.15 (khtml, like gecko) version/12.0 mqqbrowser/9.6.0 mobile/15e148 safari/604.1 qbwebviewua/2 qbwebviewtype/1 wktype/1
• Version：9.6.0.4193

QQ

• UA：mozilla/5.0 (iphone; cpu iphone os 12_4 like mac os x) applewebkit/605.1.15 (khtml, like gecko) mobile/15e148 qq/8.1.0.437 v1_iph_sq_8.1.0_1_app_a pixel/1080 core/wkwebview device/apple(iphone 6splus) nettype/wifi qbwebviewtype/1 wktype/1
• Version：8.1.0.437

微信

• UA：mozilla/5.0 (iphone; cpu iphone os 12_4 like mac os x) applewebkit/605.1.15 (khtml, like gecko) mobile/15e148 micromessenger/7.0.5(0x17000523) nettype/wifi language/zh_cn
• Version：7.0.5

微博

• UA：mozilla/5.0 (iphone; cpu iphone os 12_4 like mac os x) applewebkit/605.1.15 (khtml, like gecko) mobile/15e148 weibo (iphone8,2__weibo__9.7.1__iphone__os12.4)
• Version：9.7.1

上述所有UA值均经过toLowerCase处理，因此全部为小写形式。

分别判断几个常用浏览器

在判断前，需先通过toLowerCase将所有字母转换为小写，随后进行匹配判断。

根据上述UA特征即可轻松判断，前文已有相关写法，示例如下：

/micromessenger/i.test(u)  // 判断微信
u.indexOf("weibo") > -1   // 判断微博
u.indexOf(" qq") > -1   // 判断QQ
u.indexOf("mqqbrowser") > -1   // 判断QQ浏览器

注意QQ的判断需在qq字符串前添加空格。

获取其它信息

从上述UA可进一步判断当前系统为Android还是iOS，区分代码如下：

/android/i.test(UA)  // 判断Android
/(iPhone|iPad|iPod|iOS)/i.test(UA)  // 判断iOS

此外，从数据中还可识别手机具体型号，此处不再赘述。需注意，部分移动端浏览器（如夸克、UC）支持修改UA。深入研究还可获取更多信息。

总结

至此，关于JavaScript通过User Agent判断常用浏览器的内容介绍完毕。更多JS判断浏览器相关内容，请搜索本站往期文章或继续浏览后续文章，感谢支持！