Android 13下应用顶部与底部被系统栏遮挡的技术问询

安全阿岳

2026-7-25

问题

Android 13系统中，通过VoltBuilder构建的Cordova应用显示异常：屏幕顶部状态栏、底部导航栏遮挡应用UI，WebView以全屏模式渲染，导致应用自身的顶部/底部栏无法正常展示。涉及设备：三星Galaxy A32 5G（One UI 5.0）、三星SM-A326W。

解决方案

1. 调整Cordova配置文件`config.xml`

在配置文件中添加/修改以下偏好设置，强制WebView避开系统栏区域：

<!-- 禁止状态栏覆盖WebView -->
<preference name="StatusBarOverlaysWebView" value="false" />
<!-- 设置状态栏背景色（可根据应用风格调整） -->
<preference name="StatusBarBackgroundColor" value="#000000" />
<!-- 设置状态栏文字样式，保证与背景色适配 -->
<preference name="StatusBarStyle" value="lightcontent" />

<!-- 禁用全屏模式，避免WebView延伸至系统栏区域 -->
<preference name="Fullscreen" value="false" />

<!-- Android窗口基础配置，强化布局边界 -->
<preference name="AndroidWindowSplashScreenBackground" value="#ffffff" />

2. 确保`cordova-plugin-statusbar`插件生效

如果未安装该插件，在config.xml中添加插件依赖：

<plugin name="cordova-plugin-statusbar" spec="^3.0.0" />

该插件会自动处理系统栏与WebView的布局适配，确保WebView内容区域不被系统栏遮挡。

3. 手动适配系统栏高度（可选）

若上述配置仍未解决问题，可在应用启动时通过JS代码调整页面内边距：

document.addEventListener("deviceready", function() {
    // 获取状态栏高度
    const statusBarHeight = StatusBar.height;
    // 计算底部导航栏高度
    const navBarHeight = window.innerHeight - document.documentElement.clientHeight;
    
    // 给页面主体添加内边距，避开系统栏
    document.body.style.paddingTop = `${statusBarHeight}px`;
    document.body.style.paddingBottom = `${navBarHeight}px`;
}, false);