WKWebView iPhone X 上的页面高度问题

我发现如果我使用 WKWebView

viewport-fit=cover

和

body :{height:100%}

html机身的高度仍然无法到达iPhone X的底部，等于安全区域的高度，但是背景色可以覆盖全屏。

https://ue.qzone.qq.com/touch/proj-qzone-app/test.html

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

我能够解决这个问题（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 会自动检测其视口何时与阻塞区域相交，并相应地设置值。

内容InsetAdjustBehavior及其参数值的文档，以及为我找到解决方案的答案@dpogue的荣誉。

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

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

opacity: 0.5;

对于 HTML 和 body 标签，

您将看到 body 标签确实占据了全屏，而 HTML 标签的高度仅与安全区域一样高。

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

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

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

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

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

我在Cordova应用程序中遇到了这个问题。

Samantha 的解决方案在一定程度上对我有用，但在 html 标签中设置 812px 的高度在横向和其他设备上会导致问题。最终，我发现仅针对iPhone X大小的屏幕，同时使用css媒体查询进行横向和纵向查询就可以解决问题。

宽度和高度像素值需要声明为重要，以便iPhone接受它们。

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) 
    and (orientation : portrait) { 
        html {
            height: 812px !important;
            width: 375px !important;  
        }
    }
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) 
    and (orientation : landscape) { 
        html {
            width: 812px !important;
            height: 375px !important;
        }     
    }

您需要

为 Web 视图设置 UIEdgeInset，使其一直延伸到底部（覆盖缺口）。

您可以通过创建WKWebView的子类来实现此目的！

看看这个。

相关内容

最新更新

热门标签：