From 14c7912f264917c51033a9e48820a8f455f9d24d Mon Sep 17 00:00:00 2001 From: zhx Date: Thu, 25 Jun 2026 14:20:07 +0800 Subject: [PATCH] =?UTF-8?q?ui=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- activity/cp/index.html | 4 ++-- activity/cp/script.js | 30 +++++++++++++++++++++--------- activity/cp/style.css | 14 ++++++++------ 3 files changed, 31 insertions(+), 17 deletions(-) diff --git a/activity/cp/index.html b/activity/cp/index.html index 6d36601..36c613e 100644 --- a/activity/cp/index.html +++ b/activity/cp/index.html @@ -8,7 +8,7 @@ /> Last Weekly CP - +
@@ -175,6 +175,6 @@ - + diff --git a/activity/cp/script.js b/activity/cp/script.js index eaa4706..0d26c1b 100644 --- a/activity/cp/script.js +++ b/activity/cp/script.js @@ -1,6 +1,6 @@ (function () { var DESIGN_WIDTH = 1080; - var VIEWPORT_WIDTH = 375; + var MAX_PAGE_WIDTH = 768; var STORAGE_KEY = 'hy_cp_activity_end_at'; var stageHeights = { plaza: 4283, @@ -488,20 +488,32 @@ page.setAttribute('data-tab', activeTab); } + function getPageWidth() { + var viewportWidth = + window.innerWidth || + document.documentElement.clientWidth || + DESIGN_WIDTH; + return Math.min(Math.max(viewportWidth, 1), MAX_PAGE_WIDTH); + } + function updateStageHeight() { var designHeight = stageHeights[activeTab] || stageHeights.plaza; + var pageWidth = getPageWidth(); + var designScale = pageWidth / DESIGN_WIDTH; stage.style.minHeight = designHeight + 'px'; stage.style.height = designHeight + 'px'; - stageWrap.style.height = - Math.ceil(designHeight * (VIEWPORT_WIDTH / DESIGN_WIDTH)) + 'px'; - copyright.style.top = designHeight - 77 + 'px'; - var scale = Math.min(window.innerWidth / VIEWPORT_WIDTH, 1); + // 页面保持 1080 设计稿坐标系，大屏只放大到 768px，避免桌面或平板 WebView 把活动页拉得过宽。 document.documentElement.style.setProperty( - '--app-scale', - String(scale) + '--page-width', + pageWidth + 'px' ); - document.body.style.minHeight = - Math.ceil(stageWrap.offsetHeight * scale) + 'px'; + document.documentElement.style.setProperty( + '--design-scale', + String(designScale) + ); + stageWrap.style.height = Math.ceil(designHeight * designScale) + 'px'; + copyright.style.top = designHeight - 77 + 'px'; + document.body.style.minHeight = stageWrap.style.height; viewport.style.minHeight = stageWrap.style.height; page.style.minHeight = stageWrap.style.height; } diff --git a/activity/cp/style.css b/activity/cp/style.css index 75fc31f..34d01aa 100644 --- a/activity/cp/style.css +++ b/activity/cp/style.css @@ -4,7 +4,7 @@ } :root { - --app-scale: 1; + --page-width: 375px; --design-scale: 0.3472222222; --cp-red: #c52d45; --cp-dark-red: #8c2130; @@ -38,16 +38,17 @@ button { .app-viewport { position: relative; - width: 375px; + width: var(--page-width); + max-width: 768px; min-height: 1300px; margin: 0 auto; - transform: scale(var(--app-scale)); - transform-origin: top center; + overflow: hidden; } .page { position: relative; - width: 375px; + width: var(--page-width); + max-width: 768px; min-height: 1300px; overflow: hidden; background: var(--cp-red); @@ -55,7 +56,8 @@ button { .stage-wrap { position: relative; - width: 375px; + width: var(--page-width); + max-width: 768px; height: 1487px; overflow: hidden; background: var(--cp-red);