解决前端页面在笔记本和台式显示器比例大小不一问题（适配笔记本125% 150%缩放解决方法）

@小匠

已于 2022-06-13 21:30:29 修改

阅读量5.1k

点赞数 2

分类专栏：前端文章标签：前端 vue.js javascript

于 2022-06-13 21:28:37 首次发布

原文链接：http://t.csdn.cn/eZBlE

版权

前端专栏收录该内容

37 篇文章 1 订阅

订阅专栏

vue在需要适配的页面，比如登录页加入以下代码

  created() {
    let t = window.devicePixelRatio   // 获取下载的缩放 125% -> 1.25    150% -> 1.5

    if (!!window.ActiveXObject || "ActiveXObject" in window) {
      if (t != 1) {
        // 如果在笔记本中用IE浏览器打开 则弹出提示
        alert('您的设备对显示进行放大导致页面显示不完全,请调整后打开/或用其他浏览器')
      }
    } else {
      if (t != 1) {   // 如果进行了缩放，也就是不是1
        let c = document.querySelector('body')
        c.style.zoom = -0.62 * t + 1.55;   // 就去修改页面的缩放比例，这个公式我自己算的，不准确，勉强。
      }
    }
  },