大屏自适应 - 码农教程

<!DOCTYPE html>
<html lang="en">

<head>
<meta name="description" content="canvas zoom example">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>zoom</title>
<script src="js/jquery1.10.2.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
* {
padding: 0;
margin: 0;
}

#outer {
position: fixed;
top: 0px;
left: 0px;
overflow: hidden;
transform-origin: left top;
z-index: 999;
}
</style>
</head>

<body>
<div style="height: 100%; width: 100%; background-color: rgb(255, 255, 255);">
<div id="outer">
<div style="width:100%;height:100%;background-color:#ccc">
<div style="font-size:30px;">a54d6s5f46a54sdf</div>
<div style="position:absolute;left:200px;background-color: #fff;">
asdfasdf
</div>
</div>
</div>
</div>
<script type="text/javascript">
const screenWidth = window.screen.width;
const screenHeight = window.screen.height;
let innerWidth = window.innerWidth;
$("#outer").width(screenWidth);
$("#outer").height(screenHeight);
$("#outer").css({
'transform': 'scale(' + innerWidth / screenWidth + ')'
})
window.onresize = function() {
innerWidth = window.innerWidth;
$("#outer").css({
'transform': 'scale(' + innerWidth / screenWidth + ')'
})
}
</script>
</body>

</html>

原文地址：https://www.cnblogs.com/mrt-yyy/p/15079342.html