前端浏览器不同百分比zoom获取方法

 	<div>
      <div ref="menuItem" style="width: 200px;height: 200px;border: 1px solid red; display: none;"></div>
    	<div ref="btmBar" style="width: 200px;height: 200px;border: 1px solid rergb(0, 255, 136)"></div>
    </div>

	mounted() {
      this.$nextTick(() => {
        window.addEventListener("resize", () => {
          //监听浏览器窗口大小改变
          function ChangeRatio() {
            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;
          }
          this.ratio = ChangeRatio();//
           console.log(this.ratio,'实时缩放比例');
          if (this.ratio > "125") {
            this.$refs['menuItem'].style.display = 'block';
          }else {
            this.$refs['menuItem'].style.display = 'none'
          }
        });
      });
    },

查看方法用鼠标滚轮,或者谷歌浏览器设置缩放比例如下图

在这里插入图片描述

感觉文章好的话记得点个心心和关注和收藏,有错的地方麻烦指正一下,如果需要转载,请标明出处,多谢!!!

猜你喜欢

转载自blog.csdn.net/m0_49714202/article/details/124847180