页面缩放比例的控制

项目场景：

页面缩小的一定比例，某些样式就出现问题，于是想办法控制浏览器缩放比例

---

解决方案：

解决方案：获取浏览器缩放比例，当缩放比例为50时，就重置校正还原
实现效果：一旦页面缩放到50%以下，就会还原到100%的状态

代码如下：

<template>
  <div id="app">1111111111111111</div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
    };
  },
  components: {},
  mounted() {
    window.addEventListener("resize", this.getInfo);  //监听窗口改变
  },
  methods: {
    // 获取浏览器的缩放比例
    getZoom() {
      var ratio = 0
      var screen = window.screen
      var ua = navigator.userAgent.toLowerCase();

      if (window.devicePixelRatio !== undefined) {
        ratio = window.devicePixelRatio;
      } else if (~ua.indexOf("msie")) {
        if (screen.deviceXDPI && screen.logicalXDPI) {
          ratio = screen.deviceXDPI / screen.logicalXDPI;
        }
      } else if (
        window.outerWidth !== undefined &&
        window.innerWidth !== undefined
      ) {
        ratio = window.outerWidth / window.innerWidth;
      }
      if (ratio) {
        ratio = Math.round(ratio * 100);
      }
      return (ratio/100).toFixed(2);
    },

    // 窗口缩放控制
    getInfo() {
      let resize = this.getZoom();
      if(resize*100 < 50){
        document.body.style.zoom= 1/resize //放大倍数，例如缩放的了25%，那么此时就会是1/0.25 =4,此时就是25的四倍状态也就是还原到了100%的状态，即校正
      }

     
    },
  },
  beforeDestroy(){
    window.removeEventListener("resize", this.getInfo)  //解除绑定    
  }
};
</script>

缺点:

1、兼容问题，低版本的ie和火狐不兼容zoom

2、效果问题：本质是更改页面缩放比，放大了页面，使视觉上感觉还原了，但是浏览器缩放比还是那么多，此时会出现两个问题：

• 设置缩放比例后，再放大页面，就会出现实际页面的缩放与浏览器的缩放对不上，会以浏览器缩放的基础上再按照页面缩放比zoom缩放（大概效果就是，原尺寸，先按照浏览器的缩放比缩放，再在此基础上，按照zoom再次缩放的效果）
• 刷新问题，刷新后页面缩放比zoom重置，此时页面的大小还是会按照浏览器原本的缩放比重绘