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

前端浏览器不同百分比zoom获取方法,第1张

 	<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'
          }
        });
      });
    },

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

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

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1297607.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-10
下一篇 2022-06-10

发表评论

登录后才能评论

评论列表(0条)

保存