PhoneGap / Cordova：iPhone缺口正在流入App

Question

我构建了一个Cordova应用程序，它只是启动InAppBrowser来显示Web应用程序。在iPhone XR上，应用程序的顶部有一个黑色边框，按钮不会被iPhone的缺口覆盖。一切都按预期工作。现在我想交换启动画面来显示我自己的启动画面。我在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" />
</platform>

添加此信息后，我执行了：

cordova platform remove ios
cordova platform add ios
cordova build ios

然后我启动Xcode并在iPhone XR上运行模拟。新的启动画面显示正确，但应用程序顶部和底部的黑色边框不再显示。相反，缺口以某种方式流入应用程序，网页的粘性菜单栏移动到凹槽下方，但在菜单上方仍然可以在后台看到网站内容。

为什么更改启动画面会完全改变应用程序布局？

在我的网页中，我已添加了视口标题：

<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=contain">

预期的行为（没有自定义初始屏幕）：添加自定义初始屏幕后：

Answer 1

经过一些研究后我发现：

当没有找到匹配的闪屏图像时，显示的“黑条”是后退。因此，当我添加正确的启动画面时，使用屏幕的整个高度正确渲染应用程序。粘性菜单是显示在屏幕的最顶部（部分由凹口覆盖）还是在凹槽下方，网站内容部分显示在上面，可以通过将此元标记添加到网站来配置：

<meta name="viewport" content="viewport-fit=cover" />

如果“覆盖”将使凹口覆盖内容并且“包含”将使内容移动到凹口下方。

要应用此元标记，您必须在cordova config.xml中激活此功能：

<preference name="EnableViewportScale" value="true" />

为避免网站内容显示在状态栏的背景中，有一些cordova插件，如“cordova-plugin-statusbar”，它应添加功能以更改状态栏行为。不幸的是我还没有找到一个有效的插件，特别是在使用iOS 12时。