iPhone X上的WKWebView页面高度问题 [英] WKWebView page height issue on iPhone X

问题描述

我发现如果我使用WKWebView

I find that if I use WKWebView with

viewport-fit=cover

和

body :{height:100%}

html主体的高度仍然无法到达iPhone X的底部且等于safeArea的高度，然而，背景颜色可以覆盖全屏。

the height of html body still can not reach the bottom of iPhone X and is equal to the height of safeArea, However, the background-color can cover the fullscreen.

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

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

I load this page in a fullscreen WKWebView to reproduce the problem.

推荐答案

我能够修复（ObjC / Swift）的问题：

I was able to fix the issue with (ObjC / Swift):

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

或

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

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

This setting seems to have the same effect as viewport-fit=cover, thus if you know your content is using the property, you can fix the bug this way.

env（safe-area-inset-top） CSS声明仍然按预期工作。 WKWebView会自动检测其视口何时与阻塞区域相交并相应地设置值。

The env(safe-area-inset-top) CSS declarations still work as expected. WKWebView automatically detects when its viewport intersects with blocked areas and sets the values accordingly.

contentInsetAdjustmentBehavior 和其参数值和感谢@dpogue 获得我找到解决方案的答案。

Documentation for contentInsetAdjustmentBehavior and its parameter values and kudos to @dpogue for the answer where I found the solution.

这篇关于iPhone X上的WKWebView页面高度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！