Fix reward code modal and mobile viewport dock
Some checks failed
CI / verify (push) Has been cancelled
Some checks failed
CI / verify (push) Has been cancelled
This commit is contained in:
@@ -0,0 +1,18 @@
|
||||
# 平台首页移动端底部 Dock 可见视口修复
|
||||
|
||||
## 背景
|
||||
|
||||
手机浏览器会把顶部地址栏纳入传统 `100vh` 的计算,导致平台首页根容器高于真实可见区域。底部 dock 虽然在 flex 布局末尾,但会被推到浏览器可见区域之外,用户需要滚动或收起地址栏后才能看到。
|
||||
|
||||
## 落地口径
|
||||
|
||||
- 平台入口根壳统一使用 `.platform-viewport-shell`,优先按 `100dvh` 约束高度,旧浏览器回退到 `100vh`。
|
||||
- 移动端首页底部 dock 使用 `.platform-mobile-bottom-dock` 固定在可见视口底部,并叠加 `safe-area-inset-bottom`。
|
||||
- 移动端首页内容壳通过 `--platform-bottom-dock-outer-height` 预留底部空间,避免滚动内容被固定 dock 遮挡。
|
||||
- 不新增 UI 说明文案,不改变底部导航业务语义。
|
||||
|
||||
## 验收
|
||||
|
||||
- 手机竖屏打开平台首页时,底部 dock 始终贴住浏览器可见区域底部。
|
||||
- 浏览器地址栏展开时,dock 不应被挤到屏幕外。
|
||||
- 主页、分类、创作、存档、我的五个 tab 均保持原有点击行为。
|
||||
Reference in New Issue
Block a user