WKWebView高度减小时body底部空白问题探究与解决方案

WKWebView 高度变小时 body 底部出现空白的解决办法

简介

当使用 WKWebView 时，我们可能会遇到一个常见问题：在缩小 WebView 高度时，HTML body 底部会出现令人讨厌的空白区域。此问题在 iOS 15.0.2 中尤为普遍，但可以通过一些简单的解决办法轻松解决。

问题的原因

空白区域的出现归因于 WKWebView 布局的动态变化。当 WebView 的高度减小时，其内部的滚动视图也会相应缩小。然而，HTML body 元素的高度保持不变，导致空白区域的产生。

解决方法

以下是解决此问题的几种有效方法：

设置 Body 最小高度

通过设置 body 元素的最小高度，我们可以确保其始终大于或等于 WebView 的高度。可以使用 CSS 或 JavaScript 实现：

body {
  min-height: 100vh;
}

document.body.style.minHeight = "100vh";

使用 Flexbox 布局

Flexbox 布局提供了一种更灵活的解决方案。通过将 body 元素设置为 flex 容器，我们可以让其子元素（例如内容）填满可用空间：

body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

监听 WebView 高度变化

对于需要动态调整 body 高度的场景，我们可以监听 WebView 的高度变化事件：

webView.addObserver(self, forKeyPath: "frame", options: .new, context: nil)

override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
  if keyPath == "frame" {
    let newFrame = change![.newKey] as! CGRect
    body.style.height = "\(newFrame.height)px"
  }
}

使用第三方库

还有一些第三方库可以简化问题解决过程。例如，WKWebViewFix 库提供了一个简单的 API，专门用于修复 WKWebView 中的常见问题，包括 body 底部空白：

import WKWebViewFix

webView.fixBodyMinHeight()

结论

通过采用这些方法，我们可以轻松解决 WKWebView 中 body 底部出现空白区域的问题，从而创建美观且响应式的 WebView 应用程序。

常见问题解答

1. 为什么 body 的最小高度设置为 100vh？
这是设置 body 最小高度的通用值，它确保 body 始终填满整个屏幕高度。

2. Flexbox 布局与设置最小高度有什么区别？
Flexbox 布局允许更加动态和灵活的布局，而设置最小高度则提供了一种更简单的解决方案。

3. 我需要监听 WebView 高度变化事件吗？
仅当需要动态调整 body 高度时才需要监听高度变化事件。

4. WKWebViewFix 库是解决此问题的最佳方法吗？
WKWebViewFix 库提供了一种简单且通用的解决方案，但您也可以根据需要选择其他方法。

5. 此问题仅发生在 iOS 15.0.2 中吗？
虽然此问题在 iOS 15.0.2 中最为常见，但它也可能在其他 iOS 版本中出现。