0
点赞
收藏
分享

微信扫一扫

第六章 Scala if..else与循环

柠檬果然酸 2023-09-29 阅读 42
前端

由于前端在开发时使用的都是标准ui设计图,基本都是按照所以1920*1080, 而小屏幕笔记本由于分辨率高,所以导致的显示元素变小,因此很多笔记本的默认显示都是放大125%或者150%。
如果页面比较简单就让多余的空白单边扩展,这样可以不受影响,但是如果页面遍布了引入的其他组件,就不好控制位置和大小了。
我去搜了一下,基本都是根据 window.screen.availHeight 来获取屏幕缩放比例,
window.screen.availHeight > 1000 说明缩放选择的是100%,否则是125%、150%.

在APP.vue中:

 created() {

    this.$nextTick(() => {

      this.resizeFun();

      window.addEventListener("resize", this.resizeFun);

    });

  },

  methods: {

    resizeFun() {

      const devicePixelRatio = window.devicePixelRatio; // 获取下载的缩放 125% -> 1.25    150% -> 1.5

      console.log(devicePixelRatio, "devicePixelRatio");

      if (devicePixelRatio !== 1) {

        // 如果在笔记本中用IE浏览器打开 则弹出提示

        if (!!window.ActiveXObject || "ActiveXObject" in window) {

          alert("balabala。。。");

        } else {

          const c = document.querySelector("body");

          c.style.zoom = 1 / devicePixelRatio; // 修改页面的缩放比例

        }

      }

    }

  }

举报

相关推荐

Scala第六章节

PTA第六章

第六章 BOM

第六章 容器

第六章:接口

第六章总结

第六章 初识MyBatis

0 条评论