vue项目屏幕分辨率&屏幕的缩放适配-教程

最新推荐文章于 2024-06-06 14:40:15 发布

梦想家加一

最新推荐文章于 2024-06-06 14:40:15 发布

阅读量317

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_60196946/article/details/129837823

版权

vue项目屏幕分辨率&屏幕的缩放适配-教程

摘要由CSDN通过智能技术生成

笔记本或者显示器默认设置125%或者150%缩放，导致布局错乱的解决方法

解决方案

vue项目utils下新建devicePixelRatio.js文件

class DevicePixelRatio {
  constructor() {
    // this.flag = false;
  }
  // 获取系统类型
  _getSystem() {
    // let flag = false;
    var agent = navigator.userAgent.toLowerCase();
    //		var isMac = /macintosh|mac os x/i.test(navigator.userAgent);
    //		if(isMac) {
    //			return false;
    //		}
    // 现只针对windows处理，其它系统暂无该情况，如有，继续在此添加
    if (agent.indexOf('windows') >= 0) {
      return true;
    }
  }
  // 获取页面缩放比例
  //	_getDevicePixelRatio() {
  //		let t = this;
  //	}
  // 监听方法兼容写法
  _addHandler(element, type, handler) {
    if (element.addEventListener) {
      element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {