js+css实现页面无论缩放多少，都不会变形:
css代码：
*{
margin: 0;
}
body,html{
width: 100%;
height: 100%;
}
#box{
transform-origin: 0 0;
}
html代码：
<div id="box">
<h1>缩放</h1>
<h1>缩放</h1>
<h1>缩放</h1>
<h1>缩放</h1>
<h1>缩放</h1>
<h1>缩放</h1>
<h1>缩放</h1>
</div>
js代码：
const width = 1920
const height = 1080
let screenWidth = window.screenWidth
let screenHeight = window.screenHeight
let scaleWidth = screenWidth / width
let scaleHeight = screenHeight / height
const box = document.querySelector('#box')
updateScreenSize()
window.addEventListener('resize', updateScreenSize)
function updateScreenSize() {
screenWidth = window.innerWidth;
screenHeight = window.innerHeight;
let scaleWidth = screenWidth / width;
let scaleHeight = screenHeight / height;
box.style.width = width + 'px'
box.style.height = height + 'px'
box.style.transform = `scale(${scaleWidth}, ${scaleHeight})`
}