标签：浏览器 缩放 color text screen JS window ratio

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站一键三连哦！感谢支持！！！

标签：浏览器,缩放,color,text,screen,JS,window,ratio
来源： https://www.cnblogs.com/mochenxiya/p/16695779.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。