前端适配笔记本缩放125%，150%导致页面错乱问题

由于前端在开发时使用的都是标准ui设计图，基本都是按照所以1920*1080， 而小屏幕笔记本由于分辨率高，所以导致的显示元素变小，因此很多笔记本的默认显示都是放大125%或者150%。
如果页面比较简单就让多余的空白单边扩展，这样可以不受影响，但是如果页面遍布了引入的其他组件，就不好控制位置和大小了。
我去搜了一下，基本都是根据 window.screen.availHeight 来获取屏幕缩放比例，
window.screen.availHeight > 1000 说明缩放选择的是100%，否则是125%、150%.

在APP.vue中：

 created() {

    this.$nextTick(() => {

      this.resizeFun();

      window.addEventListener("resize", this.resizeFun);

    });

  },

  methods: {

    resizeFun() {

      const devicePixelRatio = window.devicePixelRatio; // 获取下载的缩放 125% -> 1.25    150% -> 1.5

      console.log(devicePixelRatio, "devicePixelRatio");

      if (devicePixelRatio !== 1) {

        // 如果在笔记本中用IE浏览器打开 则弹出提示

        if (!!window.ActiveXObject || "ActiveXObject" in window) {

          alert("balabala。。。");

        } else {

          const c = document.querySelector("body");

          c.style.zoom = 1 / devicePixelRatio; // 修改页面的缩放比例

        }

      }

    }

  }