From ba8e6533012b50e676beb59356c058a99a71048a Mon Sep 17 00:00:00 2001 From: Cx330 <1487537121@qq.com> Date: Thu, 13 Aug 2026 17:56:52 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E8=87=AA=E9=80=82=E5=BA=94?= =?UTF-8?q?=E7=BC=A9=E6=94=BE=E5=9C=A8=E4=B8=8D=E5=90=8C=E6=B5=8F=E8=A7=88?= =?UTF-8?q?=E5=99=A8=E4=B8=AD=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 18 ++++++++++- index.html | 33 +++---------------- js/main.js | 88 +++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 109 insertions(+), 30 deletions(-) create mode 100644 js/main.js diff --git a/css/style.css b/css/style.css index c103684..1224a06 100644 --- a/css/style.css +++ b/css/style.css @@ -8,21 +8,37 @@ padding: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } + html { + width: 100%; + overflow-x: hidden; + -webkit-text-size-adjust: 100%; + text-size-adjust: 100%; + } body { display: block; margin: 0; + padding: 0; + width: 100%; background-color: #ffffff; color: #333; overflow-x: hidden; } #resume-wrapper { width: 100%; + max-width: 100vw; + margin: 0 auto; overflow: hidden; } + #resume-scaler { + transform-origin: top left; + will-change: transform; + } #resume { width: 210mm; margin: 0 auto; - transform-origin: top left; + } + #resume-scaler.is-scaled #resume { + margin: 0; } li { line-height: 1.5; diff --git a/index.html b/index.html index 489fa89..44ca62e 100644 --- a/index.html +++ b/index.html @@ -2,12 +2,13 @@ - + 张梦南 - 简历
+
@@ -251,33 +252,7 @@
- +
+ \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..ed19273 --- /dev/null +++ b/js/main.js @@ -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(); +})();