如何通过JS来判断打开的浏览器页面是PC端还是移动端或者是其他形式（navigator.userAgent）

在进行渠道管理时，由于要在各种不同端（包括任何形式的pc端、移动端、app、Android/IOS、小程序等）中内嵌h5页面来展示不同的内容，且具有良好的兼容性。使用navigator.userAgent 可以实现该功能，且在所有浏览器都支持。

一句就可以判断是什么端？

window.location.href = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent) 
? "mobile_web端页面" 
: "PC端页面"
// 通过正则来判断
// 如果是手机端跳转到 mobile_web端页面
// 如果是PC端跳转到  PC端页面

一.navigator.userAgent 使用

浏览器用于 HTTP 请求的用户代理头的值，通过UserAgent可以取得浏览器类别、版本，客户端操作系统等信息。

• 在PC端打开 ，navigator.userAgent 显示如下

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36

• 在手机web端打开 ，navigator.userAgent 显示如下

Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1

二.navigator.userAgent 应用场景

1. 判断页面是在手机端还是PC端打开

<script>
  console.log(navigator.userAgent);
  window.location.href = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)
  ? "http://localhost:8888/mobile_web"
  : "http://localhost:8888/PC";
</script>

2. 判断页面是在手机端，平板端还是PC端打开

<script>
  console.log(navigator.userAgent);
  var os = function (){
    var ua = navigator.userAgent,
    isWindowsPhone = /(?:Windows Phone)/.test(ua),
    isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
    isAndroid = /(?:Android)/.test(ua),
    isFireFox = /(?:Firefox)/.test(ua),
    isChrome = /(?:Chrome|CriOS)/.test(ua),
    isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
    isPhone = /(?:iPhone)/.test(ua) && !isTablet,
    isPc = !isPhone && !isAndroid && !isSymbian;
    return {
        isTablet: isTablet,
        isPhone: isPhone,
        isAndroid: isAndroid,
        isPc: isPc
    };
}();

if (os.isAndroid || os.isPhone) {
  console.log("手机")
} else if (os.isTablet) {
  console.log("平板")
} else if(os.isPc) {
  console.log("电脑")
}
</script>

3. 获取手机操作系统类型，判断是Android或者IOS

/**
  * 获取操作系统类型，
  * 0 -- Android
  * 1 -- iOS
  */
 function getOSType() {
     if (/(Android)/i.test(navigator.userAgent)) {
         return 0;
     } else if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
         return 1;
     } else {
         return 2;
     }
 }

4. 判断当前环境是否是微信环境

function is_weixin(){
      var ua = navigator.userAgent.toLowerCase();
      if(ua.match(/MicroMessenger/i) == "micromessenger") {
           return true;
      } else {
            return false;
      }
}

到这里就可以轻松实现上面的问题，可以在不同端获取浏览器信息，以此来展示不同的页面内容。 当然，不管是在Vue中还是React中，都可以轻松拿到。