无论窗口缩放，屏幕放大缩小，我们的可视化界面都可以按照设计图比例正常展示，不会出现字体模块爆出，或者拉伸问题。这就是我想要的适配方案。
html
<div id="appRef"><div>html页面</div>
</div>css
#appRef{width: 1920px; /* 设计图宽 */height: 1080px; /* 设计图高 */position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);transform-origin: left top;overflow: hidden;
}JS
// * 默认缩放值const scale = {width: '1',height: '1',}// * 设计稿尺寸（px）const baseWidth = 1920const baseHeight = 960// * 需保持的比例const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))let drawTiming = nullcalcRate()window.addEventListener('resize', resize)// * 初始化页面比例function calcRate() {const appRef = document.getElementById("appRef")if (!appRef) return// 当前宽高比const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))if (appRef) {if (currentRate > baseProportion) {// 表示更宽scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)scale.height = (window.innerHeight / baseHeight).toFixed(5)appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`} else {// 表示更高scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)scale.width = (window.innerWidth / baseWidth).toFixed(5)appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`}}}// * 窗口大小变化function resize() {clearTimeout(drawTiming)// 加延迟是为了更好的看到变化的过程，不需要的可以不用drawTiming = setTimeout(() => {calcRate()}, 200)}var t = window.devicePixelRatio // 获取下载的缩放 125% -> 1.25 150% -> 1.5document.body.style.zoom = 1 / t; // 就去修改页面的缩放比例window.onresize = function () {location.reload();}
