Vue项目前端适配笔记本缩放125%，150%时导致页面错乱的解决方法

前言

叮咚~，测试小姐姐发消息说她的 windows 电脑上系统样式显示鬼畜了，于是我过去一看究竟，果然。。。，为了缓解尴尬，我还是淡定的安慰她，别慌别慌，小问题，于是赶紧回到座位研究解决办法。

由于前端在开发时使用的都是标准 ui 设计图，基本都是按照所以 1920*1080， 而小屏幕笔记本由于分辨率高，所以导致的显示元素变小，因此很多笔记本的默认显示都是放大 125%或者 150%。

如果页面比较简单就让多余的空白单边扩展，这样可以不受影响，但是如果页面遍布了引入的其他组件，就不好控制位置和大小了。

我查了一下，基本都是根据 window.screen.availHeight 来获取屏幕缩放比例，window.screen.availHeight > 1000 说明缩放选择的是 100%，否则是 125%、150%, 还有使用媒体查询的，直接拷贝过去试了一下一点用没有，但是我说明一下，这个肯定是一种解决方式，只是我仔细去研究，其他的同理，用了一下没有效果，想着显示设备应该都有 devicePixelRatio 这个属性把，于是打印了一下还真有，就去搜了相关，直接获取devicePixelRatio，因为屏幕是可以缩放的，所以直接1/devicePixelRatio就可以解决屏幕任意缩放了而现实内容固定了，如下：

我用的是 vue，所以我把它加在了 app.vue 下的：

export default {
  name: 'App',
  created () {
    const devicePixelRatio = window.devicePixelRatio // 获取下载的缩放 125% -> 1.25    150% -> 1.5
    if (devicePixelRatio !== 1) {
      // 老 ie 可以提示
      if (!! window.ActiveXObject || 'ActiveXObject' in window) {
        alert('balabala,去用 chrome 吧')
      } else {
        const c = document.querySelector('body')
        c.style.zoom = 1 / devicePixelRatio// 修改页面的缩放比例
      }
    }
  }
}

这里是屏幕任意缩放，不能是浏览器任意缩放，浏览器缩放会导致所有内容同时变大或变小，但是浏览器和屏幕是可以互相中和的，举个例子，笔记本屏幕方法 150%，那么浏览器一定是缩放 2/3 时可以显示原始的页面，因为他们共同影响页面元素的。

高级一点，在 src/utils 文件夹下新建 devicePixelRatio.js 文件：

class DevicePixelRatio {
    constructor() {
      //this.flag = false;
    }
 
    //获取系统类型
    _getSystem() {
       let flag = false;
       var agent = navigator.userAgent.toLowerCase();
       //现只针对 windows 处理，其它系统暂无该情况，如有，继续在此添加
       if (agent.indexOf("windows") >= 0) {
         return true;
       }
    }
 
    //监听方法兼容写法
    _addHandler(element, type, handler) {
      if (element.addEventListener) {
        element.addEventListener(type, handler, false);
      } else if (element.attachEvent) {
        element.attachEvent("on" + type, handler);
      } else {
        element["on" + type] = handler;
      }
   }
 
    //校正浏览器缩放比例
    _correct() {
      let t = this;
      //页面 devicePixelRatio（设备像素比例）变化后，计算页面 body 标签 zoom 修改其大小，来抵消 devicePixelRatio 带来的变化。
       document.getElementsByTagName('body')[0].style.zoom = 1 / window.devicePixelRatio;
    }
 
    //监听页面缩放
    _watch() {
      let t = this;
      t._addHandler(window, 'resize', function() {
        //注意这个方法是解决全局有两个 window.resize
        //重新校正
         t._correct()
      })
   }
 
    //初始化页面比例
    init() {
      let t = this;
      if (t._getSystem()) { //判断设备，目前只在 windows 系统下校正浏览器缩放比例
        //初始化页面校正浏览器缩放比例
        t._correct();
        //开启监听页面缩放
        t._watch();
      }
    }
}
export default DevicePixelRatio;

然后，在 app.vue 中引入文件并使用：

import DevicePixelRatio from './utils/devicePixelRatio';
export default {
  name: "App",
  created() {
    new DevicePixelRatio().init();
  }
};

还有小伙伴说了，可以使用 rem 单位，将 px 转为 rem，可行。但是，我们项目所有单位都是 px， 全部转为 rem 工程量巨大…弃了（笑哭）。不过，别灰心，有现成的轮子，大家可以看看 px2rem 插件。

说到这儿，又有小伙伴问了，如何实现浏览器随意缩放，而页面内容自动适应屏幕大小呢？

话不多说，上代码：

export default {
  name: 'App',
  created () {
    this.$nextTick(() => {
      this.resizeFun()
      window.addEventListener('resize', this.resizeFun)
    })
  },
  methods: {
    resizeFun () {
      const devicePixelRatio = window.devicePixelRatio // 获取下载的缩放 125% -> 1.25    150% -> 1.5
      if (devicePixelRatio !== 1) {
        // 如果在笔记本中用 IE 浏览器打开 则弹出提示
        if (!! window.ActiveXObject || 'ActiveXObject' in window) {
          alert('balabala。。。')
        } else {
          const c = document.querySelector('body')
          c.style.zoom = 1 / devicePixelRatio// 修改页面的缩放比例
        }
      }
    }
  }
}

这种实现方式相当于在页面创建后就给他 bind 了 resize 的方法，每次变更时自动调用调整页面缩放比例的方法 resizeFun， 这样就解决了缩放浏览器或者页面时页面内容不会错乱问题。

以上关于Vue项目前端适配笔记本缩放125%，150%时导致页面错乱的解决方法的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。