VUE：解决判断网页端与手机端情况下，横竖屏无法判断的问题

一、需求：

第一步：判断是网页端还是手机端

第二步：判断手机端，手机是横屏显示还是竖屏显示

二、解决方法：

监听网页端还是手机端

监听显示页面宽高变化

三、代码如下：

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;
    },
    renderResize() {
      // 判断横竖屏
      let width = document.documentElement.clientWidth;
      let height = document.documentElement.clientHeight;
      if (width > height) {
        this.$router.replace("/landscape");
      } else {
        this.$router.replace("/vertical_screen");
      }
    },

    watch() {
      if (this._isMobile()) {
        // 监听 resize 方法
        this.renderResize();
      } else {
        this.$router.replace("/pc");
      }
    },
  },
  mounted() {
    window.addEventListener("resize", this.watch, false);
    // 如果显示页面宽高没有变化，判断网页端还是手机端
    this.watch();
  },
  beforeDestroy() {
    // 移除监听
    window.removeEventListener("resize", this.watch, false);
  },