iPhone X安全区域突然不再起作用

时间:2019-09-26 03:34:07

标签: ios cordova

好吧,我承认这不是突然的,但是我改变了几件事。我的应用程序正在运行Cordova iOS 5.0.1(从4.5.4升级)。我也在运行最新的cordova-plugin-statusbar,添加时似乎可以修复应用程序的最安全区域。

<preference name="StatusBarOverlaysWebView" value="false" />

但是我突然在BOTTOM底部遇到问题,iPhone底部按钮位于内容上方。更好的说法是,内容位于其下方并且不尊重安全区域。

基本上,这会发生:

enter image description here

这是在iPhone X and XR上的iOS 12.1中发生的。

我的视口标签应该没问题,它是:

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

我还正确设置了Storyboards,并且正在应用以下CSS:

body{

    margin-top: constant(safe-area-inset-top);
    margin-top: env(safe-area-inset-top);
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);

    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

    margin-top: calc(0px - env(safe-area-inset-top)) !important;
    padding-top: calc(0px - env(safe-area-inset-top)) !important;
    margin-bottom: calc(0px - env(safe-area-inset-bottom)) !important;
    padding-bottom: calc(0px - env(safe-area-inset-bottom)) !important;

}

在我从iOS 4.5.4升级到5.0.1 之前,这些用于 的设置工作正常。

如您所见,我已经尝试同时使用marginpadding以及constantenv

我也尝试添加height:100vh;,但这也无济于事。我什至在所有CSS规则上都尝试过!important;,但这也不能解决问题。

起作用的设置:

function onDeviceReady() { 
   // detect here if device is iPhone X or XR
   $("body").css({ 'margin-bottom': '34px' }); 
}

但是,定位每个iPhone / iPad版本并为将来维护它是一个痛苦。

有什么我想念的吗?

0 个答案:

没有答案