大屏transform方法适配页面大小，亲测没问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
html,
body {
width: 100%;
height: 100%;
}
/* 设置滚动条，否则瞬间缩放会有显示bug */
::-webkit-scrollbar{
width: 0;
}
#app {
width: 1920px;
height: 1080px;
background: #000;
font-size: 120px;
font-weight: 600;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
</style>
<body>
<div id="app">
缩放缩放
</div>
<script>
let timeName = null
function handelResize() {
if (timeName) {
clearTimeout(timeName)
timeName = null
}
timeName = setTimeout(() => {
setCss()
console.log(document.body.clientWidth);
clearTimeout(timeName)
timeName = null
}, 500)
}
function setCss() {
let App = document.getElementById("app"); // 获取到app节点 最外层的盒子
let maxWidth = document.body.clientWidth / 1920; // 浏览器可见宽度
// let maxHeight = document.body.clientHeight / 1080; // 浏览器可见高度
// App.style.transform = `scale(${maxWidth},${maxHeight})`;
App.style.transform = `scale(${maxWidth})`; // 设置缩小比例
App.style.transformOrigin = "left top"; // 始终保持在左上
App.style.backgroundSize = "100% 100%";
}
setCss() // 进入页面第一次调用
window.addEventListener('resize', handelResize) // 根据浏览器页面可视范围变化而变化
// 如果页面适配宽度变化比较小的可以用到这种方法，就相当于一张图片，你把他放大变小一样
// 如果需要考虑高度的变化也可以用这个，但是变化范围都不要太大
// 1920跟1080都是UI设计稿的宽高，根据实际情况设置
</script>
</body>
</html>
