关于可视化大屏中，比例适配的问题为什么需要大屏比例适配？问题背景浏览器的可视化区域宽高： window.innerW

为什么需要大屏比例适配？

问题背景

浏览器的可视化区域宽高：

window.innerWidth
window.innerHeight

在全屏状态下，innerWidth、innerHeight 分别为 1920、1080。

但刚打开页面时，需要按 F11 才会进入全屏状态。

在非全屏状态下，真实的可视化区域高度还需要减去：

浏览器标签栏
地址栏
收藏栏
Windows 系统底部任务栏

而设计稿的尺寸往往是基于 1920 × 1080 去设计的。

这就造成了一个问题：
在我们打开页面的时候，可视区域高度往往是小于 1080 的。如果不去做比例适配，那么一开始打开页面，不进入全屏，就会显示不全，会出现滚动条。

解决方案

监听 innerWidth 和 innerHeight，将整屏按照 1920 × 1080 的比例进行缩放。

实现代码

CSS 部分：

<style>
        * {
            margin: 0
        }

        body {
            overflow: hidden;
        }

        .container {
            width: 1920px;
            height: 1080px;
            transform: scale(var(--scaleRatio)) translate(-50%, -50%);
            background-color: rgb(23, 151, 236);
            transform-origin: left top;
            position: absolute;
            top: 50%;
            left: 50%;
            transition: transform .5s;
        }
    </style>

HTML 和 JavaScript 部分：

<body>
    <div class="container"></div>
    <script>

        function debounce(fn, delay) {
            let timer;
            return function () {
                clearTimeout(timer)
                timer = setTimeout(() => {
                    fn.apply(this, arguments)
                }, delay)
            }
        }
        function updateScale() {
            const { innerWidth, innerHeight } = window;
            const targetWidth = 1920;
            const targetHeight = 1080;
            const realWidht = innerWidth / targetWidth
            const realHeight = innerHeight / targetHeight;
            const scaleRatio = Math.min(realWidht, realHeight)
            document.documentElement.style.setProperty('--scaleRatio', scaleRatio);
        }

        // 初始设置
        updateScale();
        // 视口变化时更新
        window.addEventListener('resize', debounce(updateScale, 300));
    </script>
</body>

为什么需要取最小值？

一开始页面的 innerWidth 是 1920，realWidth = 1，realHeight < 1，这个时候需要按照 realHeight 去缩放。

如果把可视窗口的宽度进行压缩，高度不变的话，此时就没有响应式效果了，因为始终都会取 realHeight。

虽然取 realHeight 进行计算也能解决问题，但是不够优雅也不够完美。

所以取两者最小值 Math.min(realWidht, realHeight) 做缩放系数的话，不管是改变可视窗口的高度还是宽度，整屏都会做出响应，进行设计稿比例的缩放。