Vue项目中，适配屏幕缩放比例为125% 或150%的方法

方案一

• 监听页面的缩放比例，然后调整body的zoom值进行相应缩放；
• 方案可行；但是如果项目有引用第三方UI库或图表库这些的话，例如element，一些下拉选项框的位置会偏移；或者有echarts / g2图形的话，鼠标移入tooltip显示框的位置也会偏移，这些是我遇到的两个问题。
• element的偏移可以修改样式调整；图形的偏移未找到可行修复方法，echarts和g2的github上的Issues里有人也提到相关问题，答说：zoom 是一个非标准属性，建议避免使用.....

1. 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;

2. 在app.vue中引入文件并使用

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

方案二

1. 使用rem单位，将px转为rem，可行；
2. 项目所有单位都是px， 全部转为rem工程量巨大...弃了（笑哭）。

方案三

使用px2rem插件，网上搜到的解决方法。

引用 Vue-cli3.X、Vue-cli4.X项目中使用px2rem_一起搞前端的博客-CSDN博客

最后

以上就是坚定大碗为你收集整理的Vue项目中，适配屏幕缩放比例为125% 或150%的方法的全部内容，希望文章能够帮你解决Vue项目中，适配屏幕缩放比例为125% 或150%的方法所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。