如何在离子科尔多瓦上删除iPhone X顶部视口角落的空白[重复]

Posted 2023-04-18

【中文标题】如何在离子科尔多瓦上删除iPhone X顶部视口角落的空白[重复]

【英文标题】：How to remove the white space at iPhone X top viewport corners on ionic cordova [duplicate]

【发布时间】：2018-04-17 05:28:51

【问题描述】：

我按照Understanding the WebView Viewport in ios 11 和Cordova app not displaying correctly on iPhone X (Simulator) 此处的说明设置 viewport-fit 以覆盖等。但我似乎仍然无法摆脱顶部的这些白角：

我错过了什么？

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

【问题讨论】：

你在用xcode 8 or 9吗？

版本 9.1 (9B55)

【参考方案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

【讨论】：

这应该有更多的投票，真正解决问题。

帮助删除了空白，但现在屏幕顶部太多，底部重叠太多。有什么办法可以“缩小”？

这对我没有帮助，我已经在上面提到的 github 线程中添加了评论。

有时在cordova platorm rm ios && cordova platform add ios 之后，状态插件会恢复，您需要运行上述命令。我今天花了几个小时才找到这个答案：/

【参考方案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

*** solution