WKWebView中PDF显示异常求助：着色、底部裁剪及导航栏覆盖问题

我之前也碰到过类似的PDF显示坑，WKWebView对PDF的渲染逻辑确实和普通网页不太一样，咱们一步步来搞定它：

1. 把WKWebView的布局约束牢牢绑到安全区域 #

这是解决内容越界的核心，确保PDF只在导航栏下方、底部安全区上方的范围内显示。你可以这样设置约束：

let webView = WKWebView()
webView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(webView)

// 绑定到安全区域的四个边，彻底杜绝内容跑到导航栏或底部安全区外
NSLayoutConstraint.activate([
    webView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
    webView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
    webView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
    webView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
])

2. 调整ScrollView的内容适配行为 #

WKWebView的scrollView默认会自动适配导航栏，但PDF渲染时这套逻辑容易出问题，咱们手动接管：

// 禁止自动调整内边距，让内容严格遵循我们设置的约束
webView.scrollView.contentInsetAdjustmentBehavior = .never

如果你的导航栏是半透明风格，可以试试.automatic，但.never通常能直接解决上滑覆盖导航栏的问题。

3. 注入CSS修正PDF的渲染样式 #

有时候PDF会自带奇怪的边距或缩放，咱们通过注入CSS强制调整：

// 创建用户脚本，在PDF加载完成后注入样式修正
let cssFix = """
body {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}
/* 针对WKWebView内置的PDF容器调整尺寸 */
#pdf-viewer {
    width: 100% !important;
    height: 100% !important;
}
"""
let userScript = WKUserScript(source: cssFix, injectionTime: .atDocumentEnd, forMainFrameOnly: true)
webView.configuration.userContentController.addUserScript(userScript)

4. 检查导航栏的透明度设置 #

如果导航栏是半透明的，WKWebView会默认把内容延伸到导航栏下方，你可以关闭半透明：

navigationController?.navigationBar.isTranslucent = false
// 同时设置导航栏背景色，避免出现空白区域
navigationController?.navigationBar.backgroundColor = .systemBackground

额外排查小技巧 #

• 如果你加载的是本地PDF，记得开启文件访问权限：

let config = WKWebViewConfiguration()
config.preferences.setValue(true, forKey: "allowFileAccessFromFileURLs")
let webView = WKWebView(frame: .zero, configuration: config)

• 测试时可以先临时隐藏导航栏，看看PDF是否能正常显示，再逐步排查导航栏的影响。

按照这些步骤调整后，PDF应该就能乖乖待在导航栏下方的安全区域里，不会再出现着色异常、底部裁剪和上滑覆盖导航栏的问题啦！

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