如何经过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中，均可以轻松拿到。