iOS（Cordova）构建iPhone12+项目时内容覆盖状态栏问题求助

问题描述 #

在 iPhone 12 及更高机型上构建 Cordova 项目时，页面内容上部会上移覆盖状态栏。
已添加的 viewport meta 标签：

<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">

使用的 Cordova 插件：

• cordova-plugin-add-swift-support
• cordova-plugin-ionic-webview
• cordova-plugin-statusbar

解决方案 #

1. 配置 StatusBar 插件参数 #

在项目的 config.xml 中添加或修改以下配置，强制状态栏覆盖WebView并设置透明背景：

<preference name="StatusBarOverlaysWebView" value="true" />
<preference name="StatusBarBackgroundColor" value="transparent" />

同时在 www/js/index.js 的 deviceready 事件中补充代码确保生效：

document.addEventListener("deviceready", function() {
    StatusBar.overlaysWebView(true);
    StatusBar.backgroundColorByHexString('#00000000'); // 设置全透明
}, false);

2. 适配安全区域 #

由于使用了 viewport-fit=cover，需通过CSS为页面内容添加安全区域内边距，避免被状态栏遮挡：

body {
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
}

若页面存在固定顶部的导航栏，单独适配：

.header {
    top: 0;
    padding-top: env(safe-area-inset-top);
    width: 100%;
}

3. 调整 viewport 标签（可选） #

如果上述方案仍有异常，可移除 viewport 中的 height=device-height 属性，避免布局计算偏差：

<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">

内容的提问来源于stack exchange，提问作者TiH