Cordova+Vuetify2开发WebApp：iOS状态栏图标遮挡标题栏解决方案

无需手动调整CSS，直接用Cordova官方的cordova-plugin-statusbar插件就能解决iOS状态栏与应用标题栏重叠的问题，具体步骤如下：

1. 安装StatusBar插件 #

执行以下命令安装插件：

cordova plugin add cordova-plugin-statusbar

2. 配置config.xml #

在项目根目录的config.xml中添加以下偏好设置，直接让WebView内容从状态栏下方开始渲染：

<!-- 禁止状态栏覆盖WebView -->
<preference name="StatusBarOverlaysWebView" value="false" />
<!-- 设置状态栏背景色，可根据你的应用主题调整 -->
<preference name="StatusBarBackgroundColor" value="#1976D2" />
<!-- 设置状态栏文字样式，lightcontent对应浅色文字（适配深色状态栏），default对应深色文字 -->
<preference name="StatusBarStyle" value="lightcontent" />

3. 设备就绪后初始化状态栏（可选但推荐） #

在Cordova的deviceready事件中补充代码，确保配置在iOS设备上稳定生效：

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    // 强制禁用状态栏覆盖WebView
    StatusBar.overlaysWebView(false);
    // 动态设置状态栏背景色
    StatusBar.backgroundColorByHexString("#1976D2");
    // 根据背景色调整文字样式
    StatusBar.styleLightContent();
}

原理说明 #

这个插件会在原生层面给WebView自动添加适配iOS状态栏高度的顶部内边距，Vuetify的v-app和标题栏组件会自动识别这个内边距并自然向下偏移，完全不需要手动写CSS计算状态栏高度或调整布局。

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