如何删除离子cordova上iPhone X顶部视口角落的空白区域

Question

我按照Understanding the WebView Viewport in iOS 11和Cordova app not displaying correctly on iPhone X (Simulator)这里的说明设置视口适合覆盖等等。但我仍然无法摆脱顶部的这些白角：

我错过了什么？

ionic (Ionic CLI)     : 3.15.2
cordova (Cordova CLI) : 7.1.0
Cordova Platforms     : ios 4.5.2
Ionic Framework       : ionic-angular 3.8.0

Answer 1

最终自己想出来了。如果其他人有同样的问题，这就是我的诀窍：

ionic cordova plugin rm cordova-plugin-statusbar

ionic cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git

请参阅：https://github.com/apache/cordova-plugin-statusbar/pull/85

Answer 2

在css中进行更改。使用现有代码添加此代码，例如

body{
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
}

如果您使用工具栏按钮，请执行以下操作：

.toolbar-footer{
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}

解决方案：

more help available at cordovo apache

stackoverflow solution