❤ 兼容篇

❤ 兼容篇

实现的需求是根据页面尺寸进行跳转
当app或者h5 的时候，跳转app/home页面
当pc端的时候，自动跳转导/初始页面

windows.resize监听兼容设备尺寸大小

 window.addEventListener('resize', () => {
      let w = window.innerWidth;
      let h = window.innerHeight;
      if (w < 1380) {
        this.showbigscreenapp = true;
        // console.log('app');
        // _this.$nextTick(()=>{  })
      } else {
        this.showbigscreenapp = false;
        // console.log('pc');
      };
      // console.log('页面大小发生了变化,屏幕宽高', `宽度：${w}`, `高度：${h}`);
    });

windows.resize监听事件导致浏览器cpu占用高

在实现一个监控系统的dashboard页面，页面上有很多的echarts图表，当浏览器窗口大小变化时，页面的所有数据要重新计算宽高值，于是使用了window.addEventListener(“resize”) 来解决这个问题。

结果在使用中，当浏览器窗口多次改变大小之后，页面卡顿的很厉害，查看浏览器的cpu占用率也很高，迟迟降不下来。

排查了windows.resize的正确使用方法，才知道，这个事件是需要手动销毁的。

vue2解决方法～

销毁windows.resize事件，需要实名函数，所以在添加windows.resize事件时也要使用实名函数，添加和销毁的参数要一样一样的：

//挂载
mounted() {
    window.addEventListener("resize", this.resizeHandler, false);
}

//销毁
beforeDestroy() {
    window.removeEventListener("resize", this.resizeHandler, false);
}

————————————————

vue3解决方法～

import { ref ,onMounted, onBeforeUnmount} from 'vue';
const showAndroid = ref(false);

// 挂载时添加resize事件监听
onMounted(() => {
  console.log('挂载');
  window.addEventListener("resize", resizeHandler, true);
});

// 销毁前移除resize事件监听
onBeforeUnmount(() => {
  console.log('销毁');
  window.removeEventListener("resize", resizeHandler, false);
});
const resizeHandler = () => {
      let w = window.innerWidth;
      let h = window.innerHeight;
      if (w < 1380) {
         console.log('resize-app');
         showAndroid.value= true;
      } else {
        console.log('resize-pc');
        showAndroid.value = false;
      };
     // console.log('页面大小发生了变化,屏幕宽高', `宽度：${w}`, `高度：${h}`);
};

检测当前设备是手机端还是PC端或者H5端

 // 检测设备
const isAndroid = () => {
    // 处理resize事件的逻辑
     if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) {
       console.log("1-app移动设备");
        // router.push('/app/home');
        showAndroid.value = true;
    } else if (/(micromessenger)/i.test(navigator.userAgent)) {
        console.log("微信浏览器");
        console.log("2");
        showAndroid.value = true;
        // router.push('/app/home');
    } else {
        console.log("3");
        // console.log("普通浏览器");
        // 判断h5还是pc true就是h5
        let client =
            /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
                navigator.userAgent
            );
        if (client) {
            console.log("3-1");
            console.log("普通浏览器-h5");
            showAndroid.value = true;
            // router.push('/app/home');
        } else {
            console.log("3-2");
            // console.log("普通浏览器-pc");
            showAndroid.value = false;
            // router.push('/');
        }
    }
}