很多时候,在客户现场有一些奇葩的显示设备,比如LED拼接屏、电视墙等等。它们的分辨率和比例奇奇怪怪。为了让我们的程序在这些屏幕上能正常显示,我们不得不暴力一些强制全屏。
// 第一步,以宽度计算缩放比例,屏幕宽度/页面最外层元素宽度
let zoom = window.screen.width / document.getElementById("root").offsetWidth;
// 第二步,设置页面body整体缩放比例,由于是以宽度计算的,所以现在x轴肯定是全屏
document.body.style.zoom = zoom;
// 第三步,计算Y周的缩放比例,由于zoom参数不能拆分x、y轴,所以我们y轴也被缩放了。
// 屏幕高度/缩放比例/页面最外层元素高度
let scaleY = window.screen.height / zoom / document.getElementById("root").offsetHeight;
// 第四步,设置页面body的y轴缩放比例
document.body.style.transform = "scaleY("+scaleY+")";
// 设置y周变换后body的起始位置
document.body.style.transformOrigin = "0 0"