react解决电脑分辨率及缩放导致页面变形的问题

此处借鉴Vue3 解决电脑分辨率及缩放导致页面变形的问题-CSDN博客：

新建devicePixelRatio.js：

/**
 * @description 校正windows页面在系统进行缩放后导致页面被放大的问题，通常放大比例是125%、150%
 * **/

 class DevicePixelRatio {
	constructor() {
	}
	//获取系统类型
	_getSystem() {
		let flag = false;
		var agent = navigator.userAgent.toLowerCase();
		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;

上述js文件引入页面后，会出现echarts鼠标悬浮位置不准确的问题，使用下面的方式解决：

const bodyScale = () => {
  var devicewidth = document.documentElement.clientWidth; // 获取当前分辨率下的可视区域宽度
  var scale = devicewidth / 1920; // 分母——设计稿的尺寸
  document.body.style.zoom = scale; // 放大缩小相应倍数
  // 处理缩放导致canvas定位异常
  document.styleSheets[document.styleSheets.length - 1].insertRule('canvas {zoom: ' + 1 / scale + '}');
  document.styleSheets[document.styleSheets.length - 1].insertRule('canvas {transform: scale(' + scale + ')}');
  document.styleSheets[document.styleSheets.length - 1].insertRule('canvas {transform-origin: 0 0}');
};

项目使用的是Ant Design Pro脚手架，想要全局引入react项目中使全部页面生效，可以将下面的代码放入global.jsx中：

import DevicePixelRatio from '@/utils/devicePixelRatio.js'; // 解决电脑分辨率不同导致页面变形问题的工具类

const bodyScale = () => {
  var devicewidth = document.documentElement.clientWidth; // 获取当前分辨率下的可视区域宽度
  var scale = devicewidth / 1920; // 分母——设计稿的尺寸
  document.body.style.zoom = scale; // 放大缩小相应倍数
  // 处理缩放导致canvas定位异常
  document.styleSheets[document.styleSheets.length - 1].insertRule('canvas {zoom: ' + 1 / scale + '}');
  document.styleSheets[document.styleSheets.length - 1].insertRule('canvas {transform: scale(' + scale + ')}');
  document.styleSheets[document.styleSheets.length - 1].insertRule('canvas {transform-origin: 0 0}');
};

window.addEventListener('load', () => {
  // 解决电脑分辨率不同导致的页面变形问题
  new DevicePixelRatio().init();
  bodyScale();
})

需要注意的是：

如果使用了qiankun微服务，该应用是子应用，嵌入到主应用中时自适应效果不生效，可能是受到主应用中的配置影响，可以尝试在主应用中加入自适应方法查看效果，但是会影响主应用中页面模块的原有展示效果。另外，如果本身页面的字体已经很小，比如使用的11px、12px的字体大小，在电脑高分辨率的情况下，页面字体会显示的非常小，个人觉得用户体验不是很好。