This commit is contained in:
zhx 2026-06-25 14:20:07 +08:00
parent 64d64c93da
commit 14c7912f26
3 changed files with 31 additions and 17 deletions

View File

@ -8,7 +8,7 @@
/>
<title>Last Weekly CP</title>
<link rel="stylesheet" href="../../common/theme.css?v=20260608-cp" />
<link rel="stylesheet" href="./style.css?v=20260608-cp" />
<link rel="stylesheet" href="./style.css?v=20260625-cp-width768" />
</head>
<body>
<div class="app-viewport" id="appViewport">
@ -175,6 +175,6 @@
</script>
<script src="../../common/i18n.js?v=20260608-cp"></script>
<script src="../../common/api.js?v=20260608-cp"></script>
<script src="./script.js?v=20260608-cp"></script>
<script src="./script.js?v=20260625-cp-width768"></script>
</body>
</html>

View File

@ -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;
}

View File

@ -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);