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:56:52 +08:00
parent 53b8813bcb
commit ba8e653301
3 changed files with 109 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
css/style.css
View File

@ -8,21 +8,37 @@
padding: 0; padding: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
} }
html {
width: 100%;
overflow-x: hidden;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body { body {
display: block; display: block;
margin: 0; margin: 0;
padding: 0;
width: 100%;
background-color: #ffffff; background-color: #ffffff;
color: #333; color: #333;
overflow-x: hidden; overflow-x: hidden;
} }
#resume-wrapper { #resume-wrapper {
width: 100%; width: 100%;
max-width: 100vw;
margin: 0 auto;
overflow: hidden; overflow: hidden;
} }
#resume-scaler {
transform-origin: top left;
will-change: transform;
}
#resume { #resume {
width: 210mm; width: 210mm;
margin: 0 auto; margin: 0 auto;
transform-origin: top left; }
#resume-scaler.is-scaled #resume {
margin: 0;
} }
li { li {
line-height: 1.5; line-height: 1.5;

33
index.html
View File

@ -2,12 +2,13 @@
<html lang="zh"> <html lang="zh">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>张梦南 - 简历</title> <title>张梦南 - 简历</title>
<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-wrapper">
<div id="resume-scaler">
<div id="resume"> <div id="resume">
<div class="page page-left"> <div class="page page-left">
<div class="left-section"> <div class="left-section">
@ -251,33 +252,7 @@
</div> </div>
</div> </div>
</div> </div>
<script> </div>
(function () { <script src="js/main.js"></script>
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>

88
js/main.js Normal file
View File

@ -0,0 +1,88 @@
(function () {
var resume = document.getElementById('resume');
var scaler = document.getElementById('resume-scaler');
var wrapper = document.getElementById('resume-wrapper');
if (!resume || !scaler || !wrapper) return;
function getViewportWidth() {
var candidates = [
wrapper.getBoundingClientRect().width,
document.documentElement.getBoundingClientRect().width,
document.body.getBoundingClientRect().width,
window.innerWidth,
document.documentElement.clientWidth
];
if (window.visualViewport && window.visualViewport.width) {
candidates.push(window.visualViewport.width);
}
var valid = candidates.filter(function (w) {
return typeof w === 'number' && w > 0;
});
if (!valid.length) return 360;
// 部分国产浏览器（如 vivo）会虚报更大的 layout 宽度，取最小值更接近真实可视区域
return Math.min.apply(null, valid);
}
function fit() {
scaler.style.transform = '';
scaler.style.width = '';
scaler.style.height = '';
scaler.classList.remove('is-scaled');
wrapper.style.width = '100%';
wrapper.style.maxWidth = '100%';
wrapper.style.height = '';
var a4Width = resume.offsetWidth;
var a4Height = resume.offsetHeight;
if (a4Width <= 0 || a4Height <= 0) return;
var vw = getViewportWidth();
var scale = vw / a4Width;
if (scale < 1) {
var scaledWidth = Math.ceil(a4Width * scale);
var scaledHeight = Math.ceil(a4Height * scale);
scaler.classList.add('is-scaled');
scaler.style.width = a4Width + 'px';
scaler.style.height = a4Height + 'px';
scaler.style.transform = 'scale(' + scale + ')';
wrapper.style.width = scaledWidth + 'px';
wrapper.style.maxWidth = '100%';
wrapper.style.height = scaledHeight + 'px';
} else {
wrapper.style.width = '';
wrapper.style.maxWidth = '100vw';
}
}
var timer = null;
function scheduleFit() {
if (timer) clearTimeout(timer);
timer = setTimeout(fit, 80);
}
function fitWhenReady() {
requestAnimationFrame(function () {
requestAnimationFrame(fit);
});
}
window.addEventListener('resize', scheduleFit);
window.addEventListener('orientationchange', fitWhenReady);
window.addEventListener('load', fitWhenReady);
if (window.visualViewport) {
window.visualViewport.addEventListener('resize', scheduleFit);
}
if (document.fonts && document.fonts.ready) {
document.fonts.ready.then(fitWhenReady);
}
fitWhenReady();
})();