移动端界面自适应缩放

index.html

@@ -7,6 +7,8 @@
   <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
+  <div id="resume-wrapper">
+  <div id="resume">
   <div class="page page-left">
     <div class="left-section">
       <div class="basic-info">
@@ -247,5 +249,35 @@
       </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>
 </html>