谷歌浏览器模拟微信/QQ内置浏览器调试及js判断方法

模拟微信及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

---

操作步骤如下图：

1. 打开控制台，点击右侧三个点下的setting

2. 选择左侧的Devices后，点击Add custom device按钮
   
3. 出现如图界面，填写模拟的设备名称、尺寸 及 user agent string 即可
   

---

JS判断微信及QQ内置浏览器方法

var wx = navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1
var 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') !== -1
    var ua = window.navigator.userAgent.toLowerCase();
    if (wx || ua.match(/QQ/i) == 'qq') {
      // 判断成功后的操作
    }
  } else {
    //是否为pc端微信内置浏览器
    var wx = navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1
    var ua = window.navigator.userAgent.toLowerCase();
    if (wx || ua.match(/QQ/i) == 'qq') {
      // 判断成功后的操作
    }
  }
}