有个需求要让不同分辨率都适配到1080P的效果,以15.6寸1080P笔记本为例,页面缩放默认一般是125%,要显示真正的1080P一般是调整浏览器缩放80%(Edge),也有部分浏览器默认时125%则缩放到100%。
那么能不能通过CSS实现?主流的处理方法是:
body {
zoom: 0.8;
}
确实可以实现缩放效果,但是当页面中存在Echarts组件时,Echarts组件部分会出现鼠标定位偏移问题,一般有以下两种处理方案:
方案一、改用scale替代zoom
固定比例缩放,通过CSS实现:
body {
transform: scale(0.8);
transform-origin: 0px 0px;
width: 125%;
height: 125%;
}
计算比例缩放,需要JS实现:
// body自动缩放
function bodySize () {
var size = window.screen.height / 1080;
var size2 = 100 / size + '%';
$('body').css('transform', 'scale(' + size + ')');
$('body').css('transform-origin', '0 0');
$('body').css('width', size2);
$('body').css('height', size2);
}
方案二、对Echarts组件进行处理
由于Echarts组件都是通过canvas渲染的,所以可以直接对canvas进行处理。如果页面存在其他canvas无需缩放,也可改用其他选择器。
固定比例缩放,通过CSS实现:
body {
zoom: 0.8;
}
canvas {
zoom: 1.25;
transform: scale(0.8);
transform-origin: 0px 0px;
}
计算比例缩放,需要JS实现:
// body自动缩放
function bodySize () {
var size = window.screen.height / 1080;
$('body').css('zoom', size);
// 处理缩放导致canvas定位异常
document.styleSheets[document.styleSheets.length - 1].insertRule('canvas {zoom: ' + 1 / size + '}');
document.styleSheets[document.styleSheets.length - 1].insertRule('canvas {transform: scale(' + size + ')}');
document.styleSheets[document.styleSheets.length - 1].insertRule('canvas {transform-origin: 0 0}');
}