时间戳

首页 > 解决方案 > 布局/方向更改后的 Cordova iPhone X 安全区域。

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

问题描述

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

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

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

我目前在 iOS 插件中的 AVPlayerViewController 类中使用它。

风景视频.m

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

- (UIInterfaceOrientationMask)supportedInterfaceOrientations {
    return UIInterfaceOrientationMaskLandscape;
}

提前感谢您的任何帮助/想法！

标签： ioscordovalayout

解决方案

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

在 iPhone X/XS 上，屏幕旋转会导致标题栏高度使用不正确的值，因为计算 safe-area-inset-* 没有及时反映 UI 刷新的新值。即使在最新的 iOS 12 中，UIWebView 中也存在此错误。解决方法是插入 1px 上边距，然后快速反转它，这将触发 safe-area-inset-* 立即重新计算。一个有点丑陋的修复，但如果您出于某种原因必须使用 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 闪烁但能达到目的的值。

推荐阅读