diff --git a/css/style.css b/css/style.css index 07265ab..59c9bd2 100644 --- a/css/style.css +++ b/css/style.css @@ -21,9 +21,28 @@ body { color: #fff; min-width: 320px; overflow-x: hidden; - /* PC端缩放相关样式 */ - transform-origin: left top; - transition: transform 0.1s ease-out; + margin: 0; + padding: 0; +} + +/* 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% !important; - min-width: 320px !important; - height: auto !important; - overflow-x: hidden !important; + width: 100%; + min-width: 320px; + overflow-x: hidden; } .container { diff --git a/index.html b/index.html index b7283ad..aaaa8f8 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,9 @@
-
diff --git a/js/main.js b/js/main.js
index acc4a9f..75eae3c 100644
--- a/js/main.js
+++ b/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 中进行
}
// 模拟数据 - 小组排名