vue2判断访问页面的设备是pc端还是移动端

前言：在前端工作中我们会考虑访问我们页面的所有设备，然后在根据设备的不同尺寸去匹配不同的样式

methods: {
    // 添加判断方法
    isMobile() {
      let flag = navigator.userAgent.match(    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      return flag;
    },
  },
  mounted() {
    if (this.isMobile()) {
      console.log('this.isMobile: ', this.isMobile());
      console.log("移动端");
      // this.$router.replace("/pc_index");
    } else {
      console.log("pc端");
      // this.$router.replace("/m_index");
      console.log('navigator.userAgent: ', navigator.userAgent);
    }
  },

简单说一下思路：

1. 使用navigator.userAgent获取到当前访问页面的设备====console.log('navigator.userAgent: ', navigator.userAgent);

2..match方法是用来检索这个字符串是否存在，相当于instanceof()这个api

上述方法中，不足之处在于，就是我们不容易知道市面上的所有设备，容易出现bug， 在做pc端与移动端切换时，还可以使用媒体查询(他是根据设备的尺寸来决定的-比较万能)----这个大家可以自己去百度