好吧,我承认这不是突然的,但是我改变了几件事。我的应用程序正在运行Cordova iOS 5.0.1(从4.5.4升级)。我也在运行最新的cordova-plugin-statusbar
,添加时似乎可以修复应用程序的最安全区域。
<preference name="StatusBarOverlaysWebView" value="false" />
但是我突然在BOTTOM底部遇到问题,iPhone底部按钮位于内容上方。更好的说法是,内容位于其下方并且不尊重安全区域。
基本上,这会发生:
这是在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 之前,这些用于 的设置工作正常。
如您所见,我已经尝试同时使用margin
和padding
以及constant
和env
。
我也尝试添加height:100vh;
,但这也无济于事。我什至在所有CSS规则上都尝试过!important;
,但这也不能解决问题。
起作用的设置:
function onDeviceReady() {
// detect here if device is iPhone X or XR
$("body").css({ 'margin-bottom': '34px' });
}
但是,定位每个iPhone / iPad版本并为将来维护它是一个痛苦。
有什么我想念的吗?