首页容器:去手机外壳+总宽锁540居中+窄屏100%

- app-shell: 去掉 web-phone-preview 手机外框(useWebPhonePreview=false)
- index.css device-stage: width min(100vw,540px)+margin-inline auto+100dvh(居中,窄屏100%)
- 删除 @media768 的 9:16 框,改为始终 540

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
cchis
2026-06-29 14:21:11 +08:00
parent d044e4e568
commit 1cb80f3b87
2 changed files with 4 additions and 14 deletions

View File

@@ -1,5 +1,4 @@
import type { ReactNode } from 'react'
import { shouldUseWebPhonePreview } from '../lib/platform'
import type { AppRoute } from '../lib/types'
interface AppShellProps {
@@ -8,7 +7,7 @@ interface AppShellProps {
}
export function AppShell({ activeRoute, children }: AppShellProps) {
const useWebPhonePreview = shouldUseWebPhonePreview()
const useWebPhonePreview = false
const isImmersive =
activeRoute === 'home' ||
activeRoute === 'anniversary' ||

View File

@@ -71,12 +71,11 @@ select {
}
.device-stage {
width: 100vw;
width: 100dvw;
max-width: 100%;
width: min(100vw, 540px);
width: min(100dvw, 540px);
height: 100svh;
height: 100dvh;
max-height: 100%;
margin-inline: auto;
overflow: hidden;
border-radius: 0;
}
@@ -127,14 +126,6 @@ select {
display: none;
}
@media (min-width: 768px) {
.device-stage {
width: min(calc(100vw - 24px), calc((100svh - 32px) * 9 / 16), 430px);
height: min(calc(100svh - 32px), calc((100vw - 24px) * 16 / 9), 764px);
border-radius: 28px;
}
}
.web-phone-preview-root {
display: grid;
place-items: center;