ios - PhoneGap/Cordova : iPhone notch is bleeding into the 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 上运行模拟。新的启动画面正确显示，但应用顶部和底部的黑色边框不再显示。相反，缺口以某种方式渗入应用程序，网页的粘性菜单栏被移动到缺口下方，但在菜单上方，您仍然可以在后台看到网站内容。

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

在我的网页中，我已经添加了视口(viewport)标题:

<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 上工作。