Files
Genarrative/docs/technical/PLATFORM_MOBILE_BOTTOM_DOCK_VIEWPORT_FIX_2026-04-30.md
kdletters 4ef1d27021
Some checks failed
CI / verify (push) Has been cancelled
Fix reward code modal and mobile viewport dock
2026-04-30 16:25:46 +08:00

1.0 KiB
Raw Blame History

平台首页移动端底部 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 均保持原有点击行为。