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