Vue检测web端和移动端，并强制手机横屏

最新推荐文章于 2024-07-16 11:14:25 发布

acheding

最新推荐文章于 2024-07-16 11:14:25 发布

阅读量2.8k

点赞数

文章标签：移动端适配横竖屏切换屏幕尺寸检测事件监听 resize事件

本文链接：https://blog.csdn.net/bdreamer/article/details/121291754

版权

mounted() {
    if (navigator.userAgent.match(/(iPhone|Android|iPad)/i)) {
      let width = document.documentElement.clientWidth;
      let height = document.documentElement.clientHeight;
      if (width < height) {
        alert("手机屏幕横过来嗷");
        this.loading = true;
        document.getElementById("loading").style.zIndex = 2021;
        window.addEventListener("resize", this.renderResize);
      }
    }
  },
  beforeUnmount() {
    window.removeEventListener("resize", this.renderResize);
  },
  methods: {
    renderResize() {
      let width = document.documentElement.clientWidth;
      let height = document.documentElement.clientHeight;
      if (width > height) {
        this.loading = false;
        document.getElementById("loading").style.zIndex = -5;
      } else {
        this.loading = true;
        document.getElementById("loading").style.zIndex = 2021;
      }
    },
  },