vue 动态的设置页面的高和宽，适配浏览器的缩放比

1 获取网页的缩放比

export default {
  components: { leftview, betweenview, rightview },
  data() {
    return {
        ratio:100
    };
  },
  mounted() {
    this.$nextTick(() => {
      window.addEventListener("resize", () => {
        // 监听浏览器窗口大小改变
        // 浏览器变化执行动作
        this.detectZoom();
      });
    });
  },
  methods: {
    detectZoom() {
      // let ratio = 0
      const screen = window.screen;
      const ua = navigator.userAgent.toLowerCase();
      if (window.devicePixelRatio !== undefined) {
        this.ratio = window.devicePixelRatio;
      } else if (~ua.indexOf("msie")) {
        if (screen.deviceXDPI && screen.logicalXDPI) {
          this.ratio = screen.deviceXDPI / screen.logicalXDPI;
        }
      } else if (
        window.outerWidth !== undefined &&
        window.innerWidth !== undefined
      ) {
        this.ratio = window.outerWidth / window.innerWidth;
      }

      if (this.ratio) {
        this.ratio = Math.round(this.ratio * 100);
      }
      console.log(this.ratio);
        //得到的额百分比
      return this.ratio;
    },
  },
};

2.在主盒子中引用

<template>
  <div class="box" :style="{width: ratio >100 ? ratio + '%' : '100%',height: ratio >100 ? ratio + '%' : '100%'}">
    <dv-border-box-11 title="智慧食堂监控平台">
      <div class="neirong">
        <leftview></leftview>
        <betweenview></betweenview>
        <rightview></rightview>
      </div>
    </dv-border-box-11>
  </div>
</template>