Cordova应用更换iOS启动页后iPhone刘海侵入布局问题排查

嘿，这个问题我碰到过好几次了！很大概率是因为你自定义启动页的配置没覆盖iOS安全区域的适配变体，导致Cordova和iOS系统不再自动帮你的应用预留刘海和底部Home Indicator的空间（也就是之前的上下黑边）。

当你用Cordova默认的启动页时，它自带了适配全面屏设备（比如iPhone XR）安全区域的图片和配置——系统能识别出这是个适配刘海屏的应用，自动给WebView加上上下内边距来避开那些特殊区域。但你替换成自定义启动页时，只加了anyany（任意尺寸）的变体，缺了针对安全区域的comany（竖屏全面屏）和anycom（横屏全面屏）变体，iOS系统一看你没提供这些，就觉得你的应用没适配全面屏安全区域，直接取消了之前的内边距处理，结果刘海就直接怼到网页内容上了。

下面是一步步的修复步骤：

1. 补充完整的启动页变体图片 #

针对iPhone XR这类全面屏设备，你需要添加适配安全区域的启动页图片，文件名要包含这些后缀：

• Default@2x~universal~comany.png（适配竖屏全面屏iPhone）
• Default@3x~universal~comany.png
• Default@2x~universal~anycom.png（适配横屏全面屏iPhone）
• Default@3x~universal~anycom.png

把这些图片放到res/screen/ios/目录下，然后在config.xml里补充对应的配置：

<platform name="ios">
    <splash src="res/screen/ios/Default@2x~universal~anyany.png" />
    <splash src="res/screen/ios/Default@3x~universal~anyany.png" />
    <splash src="res/screen/ios/Default@2x~universal~comany.png" />
    <splash src="res/screen/ios/Default@3x~universal~comany.png" />
    <splash src="res/screen/ios/Default@2x~universal~anycom.png" />
    <splash src="res/screen/ios/Default@3x~universal~anycom.png" />
</platform>

2. 强制配置安全区域偏好 #

即使补充了启动页，有时候Cordova还是需要明确配置来启用安全区域适配。在config.xml的iOS平台下添加以下偏好：

<platform name="ios">
    <!-- 其他配置... -->
    <preference name="StatusBarOverlaysWebView" value="false" />
    <preference name="StatusBarStyle" value="lightcontent" />
    <!-- 强制设置viewport参数，避免被Cordova默认配置覆盖 -->
    <preference name="Viewport" content="width=device-width, initial-scale=1.0, viewport-fit=contain" />
</platform>

• StatusBarOverlaysWebView设为false能让状态栏不覆盖WebView，自动留出顶部安全区域的空间。
• Viewport偏好会强制Cordova使用你指定的viewport设置，确保网页的配置生效。

3. 确保安装了StatusBar插件 #

这个插件是控制iOS状态栏和安全区域的关键，如果还没装，执行这条命令：

cordova plugin add cordova-plugin-statusbar

安装后，还可以在JavaScript代码里手动加固配置：

document.addEventListener("deviceready", function() {
    // 让状态栏不覆盖WebView
    StatusBar.overlaysWebView(false);
    // 可选：设置状态栏背景色，和你的网页风格匹配
    StatusBar.backgroundColorByName("black");
}, false);

4. 重新构建iOS平台 #

完成以上配置后，重新移除并添加iOS平台，再构建项目：

cordova platform remove ios
cordova platform add ios
cordova build ios

重新在iPhone XR模拟器里运行应用，应该会恢复之前的上下黑边（安全区域内边距），网页的固定菜单栏也不会被刘海遮挡了。如果还是有问题，可以去Xcode里检查项目的Launch Screen File设置，确保Cordova正确使用了你的启动页配置，同时确认网页的viewport标签没被Cordova的配置覆盖。

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