Swift开发中WKWebView约束布局为何出现顶部多余边距？

问题根因 #

• 当前代码把WebView的约束锚定在safeAreaLayoutGuide上，哪怕应用没有导航栏，这个锚点默认会位于状态栏下方，从视图层级上就留出了顶部安全区的距离。
• WKWebView默认会根据系统安全区规则自动调整内部滚动视图的内容缩进，会在WebView自身边界的基础上，再额外给网页内容叠加一层顶部偏移，两层偏移叠加就形成了冗余的上边距。

分场景调整方案 #

场景1：需要WebView完全铺满屏幕、无任何顶部留白 #

1. 调整Auto Layout约束，不再绑定安全区锚点，直接对齐父视图边界：
   替换setupUI方法里的约束代码：

   NSLayoutConstraint.activate([
       webView.topAnchor.constraint(equalTo: self.view.topAnchor),
       webView.leftAnchor.constraint(equalTo: self.view.leftAnchor),
       webView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),
       webView.rightAnchor.constraint(equalTo: self.view.rightAnchor)
   ])
   

2. 关闭WebView内部滚动视图的自动缩进适配：
   在WebView的初始化闭包里添加配置：

   webView.scrollView.contentInsetAdjustmentBehavior = .never
   

   这一步会阻止WebView自动给内部网页内容添加安全区偏移，网页内容会从WebView的最顶端位置开始渲染，不会出现额外留白。

场景2：需要WebView避让状态栏、但没有多余留白 #

保留原有的安全区约束，只添加上面提到的contentInsetAdjustmentBehavior = .never配置即可——原来的问题就是WebView本身已经在安全区位置，内部滚动视图又自动加了一层缩进，关掉自动适配后就不会出现双重偏移的冗余留白。

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