提交缩放

js/main.js

@@ -16,51 +16,40 @@ let yearData = {
 // PC端等比例缩放函数
 function setScale() {
     const screenWidth = window.innerWidth;
+    const container = document.querySelector('.container');
+    const scaleWrapper = document.getElementById('scale-wrapper');
+
+    if (!container) return;
 
     // 移动端不缩放，保持响应式布局
     if (screenWidth <= MOBILE_BREAKPOINT) {
-        document.body.style.transform = 'none';
-        document.body.style.transformOrigin = 'left top';
-        document.body.style.marginLeft = '0px';
-        document.body.style.width = '100%';
-        document.body.style.minWidth = '320px';
-        document.body.style.height = 'auto';
-        document.body.style.overflowX = 'hidden';
-        document.documentElement.style.height = 'auto';
+        if (scaleWrapper) {
+            scaleWrapper.style.transform = 'none';
+            scaleWrapper.style.transformOrigin = '';
+            scaleWrapper.style.height = 'auto';
+        }
+        container.style.transform = 'none';
+        container.style.width = '100%';
+        container.style.minWidth = '320px';
         return;
     }
 
-    // PC端等比例缩放
+    // PC端等比例缩放 - 只基于宽度，保持设计稿宽高比
     const scale = screenWidth / DESIGN_WIDTH;
 
     // 只限制最小缩放比例，允许放大
     // 最小缩放到60%，最大可以放大填满屏幕
     const finalScale = Math.max(scale, 0.6);
 
-    // 重置样式以获取真实内容高度
-    document.body.style.transform = 'none';
-    document.body.style.width = `${DESIGN_WIDTH}px`;
-    document.body.style.minWidth = `${DESIGN_WIDTH}px`;
-    document.body.style.height = 'auto';
+    // 应用缩放到容器，而不是 body
+    container.style.transform = `scale(${finalScale})`;
+    container.style.transformOrigin = 'top center';
+    container.style.width = `${DESIGN_WIDTH}px`;
+    container.style.minWidth = `${DESIGN_WIDTH}px`;
+    container.style.height = 'auto'; // 让内容自然撑开，不设置固定高度
 
-    // 获取真实内容高度（使用 scrollHeight 获取完整内容高度）
-    const contentHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
-
-    // 计算缩放后的高度，添加2px余量确保内容完全显示
-    const scaledHeight = Math.ceil(contentHeight * finalScale) + 2;
-
-    // 应用缩放
-    document.body.style.transform = `scale(${finalScale})`;
-    document.body.style.transformOrigin = 'left top';
-    document.body.style.width = `${DESIGN_WIDTH}px`;
-    document.body.style.minWidth = `${DESIGN_WIDTH}px`;
-    document.body.style.height = `${scaledHeight}px`;
-    document.body.style.marginLeft = '0px';
-    document.body.style.overflowX = 'hidden';
-
-    // 不限制 html 元素，让内容自然显示
-    document.documentElement.style.height = '';
-    document.documentElement.style.overflow = '';
+    // 不需要额外计算高度，容器会自然撑开
+    // 滚动会在 scale-wrapper 中进行
 }
 
 // 模拟数据 - 小组排名