很多时候,在客户现场有一些奇葩的显示设备,比如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"