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

大兔子大兔子 提交于 2021-02-07 14:42:43

问题


I followed the instructions here Understanding the WebView Viewport in iOS 11 and here Cordova app not displaying correctly on iPhone X (Simulator) to set viewport-fit to cover etc. But I still can't seem to get rid of these white corners on the top:

What am I missing?

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

回答1:


Eventually figured it out myself. In case anyone else has the same issue, here's what did the trick for me:

ionic cordova plugin rm cordova-plugin-statusbar

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

Refer to: https://github.com/apache/cordova-plugin-statusbar/pull/85




回答2:


Make changes in css .Add this code with existing code like

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

If you use toolbar button then go with:

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

Solution:

more help available at cordovo apache

stackoverflow solution



来源:https://stackoverflow.com/questions/47113436/how-to-remove-the-white-space-at-iphone-x-top-viewport-corners-on-ionic-cordova

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!