JS监听浏览器缩放比例

JS监听浏览器缩放比例

点击打开视频讲解更加详细

应用场景：

• 可在切换浏览器不同百分比时显示不同样式
• 可在切换浏览器不同百分比时控制不同的dom操作
• 。。。。。。。

完整案例：

<template>
  <div id="home">
    <h2 :class="text">浏览器缩放比例：{{ ratio }}</h2>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      ratio: 100,
      text: "text-class",
    };
  },
  created() {
    this.getWindowRatio();
  },
  mounted() {
    window.addEventListener("resize", () => {
      this.getWindowRatio();
    });
  },
  components: {},
  methods: {
    getWindowRatio() {
      let ratio = 0;
      let screen = window.screen;
      let 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);
      }
      switch (ratio) {
        case 100:
          this.text = "text-class";
          break;
        case 110:
          this.text = "text-class2";
          break;
        case 125:
          this.text = "text-class3";
          break;
        case 150:
          this.text = "text-class4";
          break;
      }
      this.ratio = ratio;
    },
  },
};
</script>

<style scoped>
.text-class {
  color: red;
}
.text-class2 {
  color: yellow;
}
.text-class3 {
  color: blue;
}
.text-class4 {
  color: green;
}
</style>

效果图：

若对您有帮助，请点击跳转到B站一键三连哦！感谢支持！！！