adminandClaude Opus 5
788a2abbe4
全局 navigationStyle 为 custom,页面需自行避让状态栏,但四处顶部内容仍被状态栏 压住:练习页标题与对话页标题、我的页顶部卡片、问答页头部。 避让不能走 CSS:env(safe-area-inset-top) 在 Android WebView 恒为 0(该值本是 iOS 刘海概念,Chromium 仅在配置 display-cutout 时才上报),uni-app 注入的 --status-bar-height 实测在 App 端同样取不到,两者都会静默回落成 0,造成"构建产物 里改动存在但运行时无效"。改由 utils/safe-area.ts 读 uni.getSystemInfoSync().statusBarHeight,各页面以内联样式绑定 padding-top。 profile 页同时把 min-height 从 100vh 改为 100%:叠加状态栏内边距后 100vh 会 溢出一屏高度产生多余滚动。 真机(vivo V2443A,720x1600,状态栏 72px)像素验证:修复前状态栏下缘 60-80px 带内 有 872 个文字像素,修复后四处均为 0。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
29 lines
1.1 KiB
TypeScript
29 lines
1.1 KiB
TypeScript
/**
|
|
* 顶部状态栏高度。
|
|
*
|
|
* 全局 navigationStyle 为 custom,页面需自行避让状态栏。这里不能用 CSS 方案:
|
|
* - env(safe-area-inset-top) 在 Android WebView 恒为 0(该值本是 iOS 刘海概念,
|
|
* Chromium 仅在配置 display-cutout 时才上报);
|
|
* - uni-app 注入的 --status-bar-height 在 App 端实测同样取不到值。
|
|
* 两者都会静默回落成 0,造成"看起来改了但没生效"。故统一读 uni 的系统信息 API,
|
|
* 由各页面以内联样式绑定,行为跨端一致且可验证。
|
|
*/
|
|
|
|
let cached: number | null = null;
|
|
|
|
/** 状态栏高度(px);取不到时返回 0,H5 下即为 0。 */
|
|
export const statusBarHeight = (): number => {
|
|
if (cached !== null) return cached;
|
|
try {
|
|
const info = uni.getSystemInfoSync?.();
|
|
const height = typeof info?.statusBarHeight === 'number' ? info.statusBarHeight : 0;
|
|
cached = Number.isFinite(height) && height > 0 ? height : 0;
|
|
} catch {
|
|
cached = 0;
|
|
}
|
|
return cached;
|
|
};
|
|
|
|
/** 状态栏避让内边距:状态栏高度 + 额外留白。 */
|
|
export const safeTopPadding = (extra = 0) => `${statusBarHeight() + extra}px`;
|