iPhone X上的WKWebView页面高度问题

Question

我发现如果我使用WKWebView

viewport-fit=cover

和

body :{height:100%}

html主体的高度仍然无法到达iPhone X的底部并且等于safeArea的高度,但是背景颜色可以覆盖全屏.

我在全屏WKWebView中加载此页面以重现问题.

Answer 1

我能够解决(ObjC/Swift)的问题:

if (@available(iOS 11.0, *)) {
  webView.scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
}

要么

if #available(iOS 11.0, *) {
    webView.scrollView.contentInsetAdjustmentBehavior = .never;
}

此设置似乎具有相同的效果viewport-fit=cover,因此如果您知道您的内容正在使用该属性,则可以通过这种方式修复错误.

该env(safe-area-inset-top)预期的CSS声明仍然有效.WKWebView会自动检测其视口何时与被阻挡区域相交并相应地设置值.

对于文档contentInsetAdjustmentBehavior和它的参数值和荣誉给@dpogue为在那里我找到了解决问题的答案.

Answer 2

我发现在html元素的CSS 中设置高度height: 100vh（而不是height: 100%）有效

Answer 3

在您的代码中，如果您添加

opacity: 0.5;

对于 html 和 body 标签，您会看到 body 标签确实占据了全屏，而 html 标签高度仅与安全区域一样高。

如果你只是想让 html 区域到达边缘，你可以显式设置：

<html style='height: 812px;'>

只要您还添加以下内容，这将使 html 中的内容正确适合全屏：

<meta name="viewport" content="initial-scale=1.0, viewport-fit=cover">

当然这不是最优雅的解决方案，但它确实有效。