模拟微信及QQ内置浏览器主要是通过判断浏览器的 UA来进行区别。
安卓 QQ 内置浏览器 UA:
Mozilla/5.0 (Linux; Android 5.0; SM-N9100 Build/LRX21V) > AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 > Chrome/37.0.0.0 Mobile Safari/537.36 V1_AND_SQ_5.3.1_196_YYB_D > QQ/5.3.1.2335 NetType/WIFI
安卓微信内置浏览器 UA:
Mozilla/5.0 (Linux; Android 5.0; SM-N9100 Build/LRX21V) > AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 > Chrome/37.0.0.0 Mobile Safari/537.36 > MicroMessenger/6.0.2.56_r958800.520 NetType/WIFI
IOSQQ 内置浏览器 UA:
Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_2 like Mac OS X) > AppleWebKit/537.51.2 (KHTML, like Gecko) Mobile/11D257 > QQ/5.2.1.302 NetType/WIFI Mem/28
IOS 微信内置浏览器 UA:
Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_2 like Mac OS X) > AppleWebKit/537.51.2 (KHTML, like Gecko) Mobile/11D257 > MicroMessenger/6.0.1 NetType/WIFI
操作步骤如下图:
打开控制台,点击右侧三个点下的setting 选择左侧的Devices后,点击Add custom device按钮
出现如图界面,填写模拟的设备名称、尺寸 及 user agent string 即可
JS判断微信及QQ内置浏览器方法
var wx = navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1var ua = window.navigator.userAgent.toLowerCase();if (wx || ua.match(/QQ/i) == 'qq') {// 判断成功后的操作}
区分PC和移动端
function () {/* 判断是pc还是移动端 */var sUserAgent = navigator.userAgent.toLowerCase();var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";var bIsMidp = sUserAgent.match(/midp/i) == "midp";var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";var bIsAndroid = sUserAgent.match(/android/i) == "android";var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {//是否为移动端微信内置浏览器var wx = navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1var ua = window.navigator.userAgent.toLowerCase();if (wx || ua.match(/QQ/i) == 'qq') {// 判断成功后的操作}} else {//是否为pc端微信内置浏览器var wx = navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1var ua = window.navigator.userAgent.toLowerCase();if (wx || ua.match(/QQ/i) == 'qq') {// 判断成功后的操作}}}