首页容器:去手机外壳+总宽锁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:
@@ -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' ||
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user