WKWebView特殊布局方法咨询及初始化配置问题排查

嘿，当然有不少特殊的WKWebView布局技巧能解决特定场景的问题！先瞅一眼你给出的初始化代码片段——你已经配置了一堆媒体相关的属性，但估计是在布局环节踩坑了？我来分享几个实用的特殊布局方案，再结合你的配置给点小建议：

1. 自适应内容高度（动态调整WebView高度） #

这应该是最常用的特殊布局了，比如在UITableViewCell里嵌WebView的时候，总不能固定死高度吧？实现思路很简单：

• 先挂上WKNavigationDelegate，监听网页加载完成的事件
• 加载完成后，通过JS获取网页的实际高度，再调整WebView的约束或者frame：

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    webView.evaluateJavaScript("document.body.scrollHeight") { [weak self] result, error in
        guard let contentHeight = result as? CGFloat, error == nil else { return }
        // 这里假设你用了Auto Layout，更新高度约束
        self?.webViewHeightConstraint.constant = contentHeight
    }
}

• 要是网页有动态内容（比如懒加载图片），光靠加载完成的回调可能不够，最好让网页通过WKScriptMessageHandler主动给原生发消息，通知高度变化。

2. 嵌入滚动视图的“无滚动”WebView #

有时候不想让WebView自己滚，想让外层的UIScrollView统一管理滚动，这时候得这么做：

• 先把WebView自带的滚动禁用：webView.scrollView.isScrollEnabled = false
• 再按照上面的自适应高度方法，把WebView的高度设为内容总高度，这样外层滚动视图就能把整个WebView内容包进去了。

3. 自定义内边距与安全区适配 #

要是想给WebView内容加个边距，或者适配刘海屏、底部安全区，有两种思路：

• 原生侧：直接给WebView的scrollView设置内边距：

webView.scrollView.contentInset = UIEdgeInsets(top: 20, left: 16, bottom: 34, right: 16)
// 要是需要适配安全区，也可以这么写
let bottomInset = UIApplication.shared.keyWindow?.safeAreaInsets.bottom ?? 0
webView.scrollView.contentInset.bottom = bottomInset

• 网页侧：在CSS里用padding或者env(safe-area-inset-bottom)这类属性，配合原生设置效果会更协调。

4. 局部内容展示（裁剪或隐藏无关区域） #

如果只需要展示网页的某一部分，比如某个特定区块，有两种玩法：

• 原生侧：给WebView加个maskView，裁剪掉不需要的区域
• JS侧：直接修改网页的CSS，隐藏无关部分，只保留目标内容：

webView.evaluateJavaScript("""
    document.body.style.overflow = 'hidden';
    document.getElementById('unwanted-section').style.display = 'none';
""")

针对你初始化配置的小提醒 #

从你给出的代码来看，你开了ignoresViewportScaleLimits、allowsInlineMediaPlayback这些媒体属性，要是布局出问题，不妨检查这几点：

• 网页的viewport meta标签是不是正确设置了，比如有没有写<meta name="viewport" content="width=device-width, initial-scale=1.0">，这个会直接影响WebView的缩放和布局
• 有没有给WebView加对Auto Layout约束？比如leading/trailing是否固定，高度是动态调整还是固定值？
• WebView的scrollView的contentInsetAdjustmentBehavior有没有设置对？这个属性会影响安全区的适配逻辑

内容的提问来源于stack exchange，提问作者Raffi