谷歌浏览器模拟微信/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

在这里插入图片描述

  1. 选择左侧的Devices后,点击Add custom device按钮
    在这里插入图片描述
  2. 出现如图界面,填写模拟的设备名称、尺寸 及 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') {
      // 判断成功后的操作
    }
  }
}
发布了35 篇原创文章 · 获赞 27 · 访问量 8万+

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览