修复自适应缩放在不同浏览器中的问题

index.html

@@ -2,12 +2,13 @@
 <html lang="zh">
 <head>
   <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>
   <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
   <div id="resume-wrapper">
+  <div id="resume-scaler">
   <div id="resume">
   <div class="page page-left">
     <div class="left-section">
@@ -251,33 +252,7 @@
   </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>
+  </div>
+  <script src="js/main.js"></script>
 </body>
 </html>