2021-10-28 几个项目中解决兼容部分用户windows10缩放125%时遇到的一些问题记录

zoom方法

代码如下：

var t = window.devicePixelRatio; // 获取下载的缩放 125% -> 1.25    150% -> 1.5
document.body.style.zoom = 1 / t;

该方法是网上找到的，遇到的问题如下：
1、echarts图表的鼠标悬浮事件错位；
2、easyui选择日期控件，打开的日历位置错位。
暂未遇到别的问题。

transfrom：（scale（））方法

代码如下：

function resize() {

	var t = window.devicePixelRatio; // 获取下载的缩放 125% -> 1.25    150% -> 1.5

	$("body").css({
		//    方法1
		//   transform: "scale(" + ratioX + "," + ratioY + ")",
		// 方法2
		transform: "scale(" + 1 / t + "," + 1 / t + ")",
		transformOrigin: "left top",
		backgroundSize: "100% 100%"
	});
	// $("html").css({'overflow':'hidden'})
}
;
$(window, document).resize(function () {
	resize();
});

因为这个方法需要用于vue-cli项目，所以把我原来的jquery代码改成了原生js；

var t = window.devicePixelRatio; // 获取下载的缩放 125% -> 1.25    150% -> 1.5
 let bodyStyle=document.body;
bodyStyle.style.transform=`scale(${1/t})`;
bodyStyle.style.transformOrigin="left top";
 bodyStyle.style.backgroundSize="100% 100%";
 bodyStyle.style.width="1899px";

该方法结合了方法1的思路，使用了transfrom来做，解决了zoom缩放所带来的图表与日历控件的错位问题，但是也带来了新的问题。echarts图表与日历控件虽然不再错位，但是select下拉框控件展开的内容产生了错位；并且高度被同步拉伸了；错位具体原因还未知，目前还在寻找合适的解决方法。
若有大佬有更完美的解决方案，还望告知，万分感谢。