如何在 ionic cordova 的 iPhone X 顶部视口角处移除白色 space

Question

我按照这里的说明 Understanding the WebView Viewport in iOS 11 and here 将 viewport-fit 设置为 cover 等。但我似乎仍然无法摆脱顶部的这些白角：

我错过了什么？

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

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);
}

解决方案：

How to remove the white space at iPhone X top viewport corners on ionic cordova