提交缩放

css/style.css

@@ -21,9 +21,28 @@ body {
     color: #fff;
     min-width: 320px;
     overflow-x: hidden;
-    /* PC端缩放相关样式 */
+    margin: 0;
-    transform-origin: left top;
+    padding: 0;
-    transition: transform 0.1s ease-out;
+}
+
+/* PC端缩放包装器 */
+#scale-wrapper {
+    width: 100%;
+    height: 100vh;
+    overflow-x: hidden;  /* 隐藏横向滚动条 */
+    overflow-y: auto;   /* 允许纵向滚动 */
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+}
+
+/* 移动端不需要包装器 */
+@media screen and (max-width: 768px) {
+    #scale-wrapper {
+        height: auto;
+        overflow: visible;
+        display: block;
+    }
 }
 
 .container {
@@ -32,8 +51,9 @@ body {
     flex-direction: column;
     justify-content: space-between;
     background: #000;
-    /* 固定最小宽度，避免缩放时内容挤压 */
+    /* 固定设计稿宽度 */
-    min-width: 1200px;
+    width: 1920px;
+    min-width: 1920px;
 }
 
 .cont{
@@ -48,11 +68,9 @@ body {
 /* 移动端下调整宽度 */
 @media screen and (max-width: 768px) {
     body {
-        transform: none !important;
+        width: 100%;
-        width: 100% !important;
+        min-width: 320px;
-        min-width: 320px !important;
+        overflow-x: hidden;
-        height: auto !important;
-        overflow-x: hidden !important;
     }
 
     .container {

index.html

@@ -12,7 +12,9 @@
     <script src="js/main.js" defer></script>
 </head>
 <body>
-    <div class="container">
+    <!-- 缩放包装器：负责固定高度和滚动 -->
+    <div id="scale-wrapper">
+        <div class="container">
         <!-- 头部图片 -->
         <div class="header-image">
             <img src="img/heard.png" alt="头部装饰图片">

js/main.js

@@ -16,44 +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';
+        if (scaleWrapper) {
-        document.body.style.transformOrigin = 'left top';
+            scaleWrapper.style.transform = 'none';
-        document.body.style.marginLeft = '0px';
+            scaleWrapper.style.transformOrigin = '';
-        document.body.style.width = '100%';
+            scaleWrapper.style.height = 'auto';
-        document.body.style.minWidth = '320px';
+        }
-        document.body.style.height = 'auto';
+        container.style.transform = 'none';
-        document.body.style.overflowX = 'hidden';
+        container.style.width = '100%';
+        container.style.minWidth = '320px';
         return;
     }
 
-    // PC端等比例缩放
+    // PC端等比例缩放 - 只基于宽度，保持设计稿宽高比
     const scale = screenWidth / DESIGN_WIDTH;
 
     // 只限制最小缩放比例，允许放大
     // 最小缩放到60%，最大可以放大填满屏幕
     const finalScale = Math.max(scale, 0.6);
 
-    // 重置样式以获取真实内容高度
+    // 应用缩放到容器，而不是 body
-    document.body.style.transform = 'none';
+    container.style.transform = `scale(${finalScale})`;
-    document.body.style.height = 'auto';
+    container.style.transformOrigin = 'top center';
+    container.style.width = `${DESIGN_WIDTH}px`;
+    container.style.minWidth = `${DESIGN_WIDTH}px`;
+    container.style.height = 'auto'; // 让内容自然撑开，不设置固定高度
 
-    // 获取真实内容高度
+    // 不需要额外计算高度，容器会自然撑开
-    const contentHeight = document.body.scrollHeight;
+    // 滚动会在 scale-wrapper 中进行
-
-    // 计算缩放后的高度
-    const scaledHeight = Math.ceil(contentHeight * finalScale);
-
-    // 应用缩放
-    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';
 }
 
 // 模拟数据 - 小组排名