iOS开发：WKWebView滚动时上下出现边距，如何实现全屏显示？

你遇到的问题是WKWebView的scrollView默认会自动适配安全区调整content inset，导致顶部和底部出现空白边距，即使使用了edgesIgnoringSafeArea(.all)也无法解决。以下是具体的解决方法：

关键修改步骤 #

在WebView的makeUIView方法中，给scrollView设置contentInsetAdjustmentBehavior为.never，禁止其自动调整content inset：

webView.scrollView.contentInsetAdjustmentBehavior = .never

修改后的完整WebView代码 #

import SwiftUI
import WebKit

struct WebView: UIViewRepresentable {
    let url: URL
    
    func makeUIView(context: Context) -> WKWebView {
        let webView = WKWebView()
        webView.allowsBackForwardNavigationGestures = true
        webView.scrollView.isScrollEnabled = true
        webView.scrollView.backgroundColor = .red
        // 禁止scrollView自动适配安全区调整边距
        webView.scrollView.contentInsetAdjustmentBehavior = .never
        return webView
    }
    
    func updateUIView(_ webView: WKWebView, context: Context) {
        let request = URLRequest(url: url)
        webView.load(request)
    }
}

原理说明 #

iOS中，UIScrollView默认会根据设备的安全区自动调整content inset，这就是导致你看到的顶部/底部空白边距的原因。设置contentInsetAdjustmentBehavior = .never后，scrollView不再自动调整边距，配合SwiftUI的edgesIgnoringSafeArea(.all)，就能让WKWebView完全全屏显示，不会出现滚动时的边距变化。

问题截图 #

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