需求：在电脑分辨率放大的情况下（比如选择了125%、150%或者175%等），需将应用缩放至正常比例
image.png
//获取屏幕缩放比例
function getRatio() {
var ratio = 0;
var screen = window.screen;
var ua = navigator.userAgent.toLowerCase();
if (window.devicePixelRatio !== undefined) {
ratio = window.devicePixelRatio;
} else if (~ua.indexOf("msie")) {
if (screen.deviceXDPI && screen.logicalXDPI) {
ratio = screen.deviceXDPI / screen.logicalXDPI;
}
} else if (
window.outerWidth !== undefined &&
window.innerWidth !== undefined
) {
ratio = window.outerWidth / window.innerWidth;
}
if (ratio) {
ratio = Math.round(ratio * 100);
}
return ratio;
},
//设置
document.body.style.zoom = 100 / this.getRatio();
提示：
平时用的dataV大屏适配之类的，本质是px尺寸的缩放与扩大，与控制分辨率不同
题外话：
分辨率改变会影响echarts图表导致鼠标焦点失焦问题，解决如下：
//html代码
<div class="my-echarts" ref="echarts" :style="`zoom:${zoom};transform:scale(${
1 / zoom
});transform-origin:0 0`"></div>
//JS代码
mounted() {
this.zoom = 1 / document.body.style.zoom;
window.addEventListener("resize", () => {
this.zoom = 1 / document.body.style.zoom;
});
},
其实只要是分辨率改变导致元素的鼠标失焦（鼠标偏移）都可以用上面的方法修正，不仅限于echarts包括地图等
