布局/方向更改后的Cordova iPhone X安全区域。

Question

我safe-area-inset-top在Cordova应用程序中使用CSS变量来处理iPhone X安全区域：

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

应用启动时按预期工作。但是，当我通过自定义插件进入和退出全屏（强制横向）AVPlayer并返回到肖像应用程序时，填充消失了，我的应用程序被部分切断了。

我目前在iOS上的插件中的AVPlayerViewController类中使用此功能。

LandscapeVideo.m

- (UIInterfaceOrientation)preferredInterfaceOrientationForPresentation {
    return UIInterfaceOrientationLandscapeRight; // or LandscapeLeft
}

- (UIInterfaceOrientationMask)supportedInterfaceOrientations {
    return UIInterfaceOrientationMaskLandscape;
}

在此先感谢您的帮助/想法！

Answer 1

修复了iPhone X / XS屏幕旋转问题

在iPhone X / XS上，屏幕旋转会导致标题栏高度使用不正确的值，因为safe-area-inset- *的计算没有及时反映UI刷新的新值。即使在最新的iOS 12中，此错误也存在于UIWebView中。一种解决方法是插入一个1px的上边距，然后快速将其反转，这将触发安全区域插入*立即被重新计算。修复起来有些丑陋，但是如果您出于某种原因而不得不使用UIWebView，它就可以工作。

window.addEventListener("orientationchange", function() {
    var originalMarginTop = document.body.style.marginTop;
    document.body.style.marginTop = "1px";
    setTimeout(function () {
        document.body.style.marginTop = originalMarginTop;
    }, 100);
}, false);

该代码的目的是使document.body.style.marginTop稍作更改，然后将其反转。不一定必须是“ 1px”。您可以选择一个不会导致UI闪烁但可以达到其目的的值。

Answer 2

如本答案有关设备方向的注释中所示： https ://stackoverflow.com/a/46232813/1085272

使用 uiWebView（默认）时进行一些方向更改后会出现 safe-area-inset-xxx 问题。

切换到 WKWebView （例如通过使用cordova-plugin-wkwebview-engine）解决了我的问题。