修复 OTA 后顶部内容顶到状态栏 (未让出电量/信号栏)
现象: 直装 APK 时头部正常让开状态栏; 经 OTA 升级到 V0.2 前端后, 页面从屏幕最顶部开始, 与电量/信号栏重叠. 根因: 顶部让位一直只依赖 antd-mobile 的 <SafeArea position="top" />, 它只是一个空 div, 高度完全来自 env(safe-area-inset-top). 而 Android WebView (Tauri) 下该变量常返回 0. 旧版每页顶部都有 45px 的 antd-mobile <NavBar>, 视觉上兜住了状态栏, 掩盖了 inset 失效; V0.2 把 NavBar 换成 23px 的 PageHeader (「我」页甚至无头部), 兜底消失后问题暴露. 与 OTA 机制本身无关. 修复: - MobileShell: <SafeArea> 换成 .app-safe-top, 高度由 --safe-top 控制 - main.jsx: 新增 calibrateSafeTop(), 用临时元素测 env(safe-area-inset-top), 并与 screen.height - visualViewport.height 交叉校验, 取较大值写入 --safe-top; 两者都不可用时保底 24px; 监听旋转/视口变化重算 - globals.css: --safe-top 保留 env() 表达式, 新增 .app-safe-top 样式 这样无论 WebView 是否上报 inset, 顶部都能正确让位.
This commit is contained in:
+13
-1
@@ -10,7 +10,11 @@
|
||||
--color-primary: #1677ff;
|
||||
--color-accent: #1677ff;
|
||||
--color-danger: #ff3141;
|
||||
--safe-top: env(safe-area-inset-top, 0px);
|
||||
/* 顶部状态栏让位高度.
|
||||
Android WebView (Tauri) 下 env(safe-area-inset-top) 常常返回 0, 仅靠它会让内容
|
||||
顶到状态栏底下 (V0.2 移除了 45px 的 NavBar 后暴露). 这里给一个保守兜底值,
|
||||
再由 main.jsx 的 calibrateSafeTop() 用实测高度覆盖 --safe-top, 双保险. */
|
||||
--safe-top: max(env(safe-area-inset-top, 0px), 0px);
|
||||
--safe-bottom: env(safe-area-inset-bottom, 0px);
|
||||
--safe-left: env(safe-area-inset-left, 0px);
|
||||
--safe-right: env(safe-area-inset-right, 0px);
|
||||
@@ -49,6 +53,14 @@ input, textarea, select { font: inherit; }
|
||||
padding-right: var(--safe-right);
|
||||
}
|
||||
|
||||
/* 顶部状态栏安全区占位: 高度由 --safe-top 决定 (main.jsx 实测校准后覆盖) */
|
||||
.app-safe-top {
|
||||
flex: 0 0 auto;
|
||||
height: var(--safe-top);
|
||||
width: 100%;
|
||||
background: var(--color-bg);
|
||||
}
|
||||
|
||||
.app-main {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
|
||||
Reference in New Issue
Block a user