前端识别微信/QQ/TIM内置浏览器和QQ浏览器

移动端的网页呈现终端可能是大多数的浏览器，也可以是QQ，微信这样的聊天工具自带的浏览器功能，如果想要做区别对待各个场景下的不同呈现方式，就需要事先判断用户的浏览器种类，如果不想在聊天工具中自带浏览器中呈现，就需要找出来然后做一些屏蔽效果。对于如何区分它们还是用ua，各个浏览器的详细ua分别是什么就需要了解了，这里我测试了自己的手机上，微信，QQ，TIM，QQ浏览器的分别访问带有js脚本，输出具体的ua信息

document.write(navigator.userAgent);

具体信息是：

QQ浏览器
Mozilla/5.0 (Linux; U; Android 9; zh-cn; YAL-AL00 Build/HUAWEIYAL-AL00) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/66.0.3359.126 MQQBrowser/9.6 Mobile Safari/537.36


微信内置浏览器
Mozilla/5.0 (Linux; Android 9; YAL-AL00 Build/HUAWEIYAL-AL00; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/66.0.3359.126 MQQBrowser/6.2 TBS/044904 Mobile Safari/537.36 MMWEBID/4559 MicroMessenger/7.0.6.1500(0x2700063D) 
Process/tools NetType/WIFI Language/zh_CN

Tim内置浏览器
Mozilla/5.0  (Linux; Android 9; YAL-AL00 Build/HUAWEIYAL-AL00; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/66.0.3359.126 MQQBrowser/6.2 TBS/044904 Mobile Safari/537.36 V1_AND_SQ_7.1.0_0_TIM_D TIM/2.3.1.1834 QQ/6.5.5 
NetType/WIFI WebP/0.3.0 Pixel/1080

QQ内置浏览器
Mozilla/5.0 (Linux; Android 9; YAL-AL00 Build/HUAWEIYAL-AL00; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/66.0.3359.126 MQQBrowser/6.2 TBS/044904 Mobile Safari/537.36 V1_AND_SQ_8.1.3_1246_YYB_D QQ/8.1.3.4185 

NetType/WIFI WebP/0.3.0 Pixel/1080 StatusBarHeight/109 SimpleUISwitch/0

有了这些信息就可以区别出各个浏览器的首先微信内置有个关键词”MicroMessenger”可以很轻易区别出来，QQ浏览器，QQ/TIM内置浏览器都具有“MQQBrowser”这个关键词，而QQ/TIM内置浏览器多了一个标识形如“    QQ/8.1 ”这样的（为了区别MQQBrowser中的QQ，所以前面需要有个空字符），所以“    QQ”的有无可以区别出QQ浏览器和QQ/TIM内置浏览器，而对于QQ和TIM的区分，TIM有个“TIM”关键字符串也可以做区分了（如果有需求可以将二者区分开），所以咱们的JS区分代码也就出来

var ua = navigator.userAgent.toLowerCase(),
    isWx = false,isQQ = false, isQQb = false;
 if(ua.indexOf(' qq')>-1 && ua.indexOf('mqqbrowser') >-1){  //" qq"和"mqqbrowser"字符串都存在
    //qq、tim内置浏览器
    isQQ = true;
 }
if(ua.indexOf('mqqbrowser')> -1 && ua.indexOf(" qq")<0){ //" qq"字符串存在
   //qq浏览器
    isQQb = true;
}
if (ua.match(/MicroMessenger/i) == 'micromessenger') {  //MicroMessenger字符串存在
   //微信浏览器
    isWx = true;
}