DreamLife/DreamLife_Resume
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

移动端界面自适应缩放

Browse Source
This commit is contained in:
张梦南 2026-08-13 17:34:38 +08:00
parent 2d504763db
commit 53b8813bcb
2 changed files with 43 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
css/style.css
View File

@ -10,10 +10,19 @@
} }
body { body {
display: block; display: block;
width: 210mm; margin: 0;
margin: 0 auto;
background-color: #ffffff; background-color: #ffffff;
color: #333; color: #333;
overflow-x: hidden;
}
#resume-wrapper {
width: 100%;
overflow: hidden;
}
#resume {
width: 210mm;
margin: 0 auto;
transform-origin: top left;
} }
li { li {
line-height: 1.5; line-height: 1.5;

32
index.html
View File

@ -7,6 +7,8 @@
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
</head> </head>
<body> <body>
<div id="resume-wrapper">
<div id="resume">
<div class="page page-left"> <div class="page page-left">
<div class="left-section"> <div class="left-section">
<div class="basic-info"> <div class="basic-info">
@ -247,5 +249,35 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<script>
(function () {
var resume = document.getElementById('resume');
var wrapper = document.getElementById('resume-wrapper');
if (!resume || !wrapper) return;
function fit() {
var a4WidthPx = resume.offsetWidth; // A4 排版宽度（≈794px），不受 transform 影响
var vw = document.documentElement.clientWidth || window.innerWidth; // 可视宽度（已扣除滚动条）
if (a4WidthPx > 0 && vw < a4WidthPx) {
var scale = vw / a4WidthPx; // 等比缩放：让 A4 宽度正好填满屏幕
resume.style.transform = 'scale(' + scale + ')';
resume.style.marginLeft = '0';
resume.style.marginRight = '0';
wrapper.style.height = (resume.offsetHeight * scale) + 'px'; // 同步容器高度，消除缩放后空白
} else {
resume.style.transform = 'none';
resume.style.marginLeft = '';
resume.style.marginRight = '';
wrapper.style.height = '';
}
}
var t = null;
window.addEventListener('resize', function () { if (t) clearTimeout(t); t = setTimeout(fit, 80); });
window.addEventListener('orientationchange', fit);
window.addEventListener('load', fit);
fit();
})();
</script>
</body> </body>
</html> </html>