cordova - 如何在 ionic cordova 上删除 iPhone X 顶部视口(viewport)角的空白区域

Question

这个问题在这里已经有了答案:





Ionic - White edge on iPhone X in header

(1 个回答)


3年前关闭。




我按照这里的说明 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

Answer 1

在 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