为什么WKWebView在iOS13及以上版本会被导航栏遮挡
问题原因
该问题是iOS13及以上系统对视图控制器边缘延伸规则、安全区域布局逻辑调整导致的:半透明导航栏默认会允许下方内容延伸至其底部之下,你固定写死44的约束值无法适配不同设备的导航栏+状态栏总高度,因此无法生效。
可行解决思路
- 调整视图控制器的边缘延伸属性
在myViewController的viewDidLoad方法中添加如下代码,关闭内容向导航栏区域的延伸行为:
edgesForExtendedLayout = []
- 修改WebView顶部约束的参照对象
不要将顶部约束绑定到父视图的顶部,改为绑定到当前控制器view的安全区域顶部,系统会自动避开导航栏、状态栏等上层控件,适配所有设备尺寸:
// 代码创建约束示例,Storyboard/Xib创建约束时直接选择参照Safe Area顶部即可 webView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
- 关闭导航栏半透明属性
如果业务允许导航栏不透明,直接将导航栏的半透属性关闭,内容布局会自动从导航栏底部开始,无需额外调整约束:
navigationController?.navigationBar.isTranslucent = false
- 自定义内容内边距(仅适用于需要WebView延伸到导航栏下方的场景)
如果需要实现导航栏半透、WebView背景延伸到导航栏下方的效果,仅需调整WebView的滚动内容内边距,避免内容被导航栏遮挡:
let statusBarHeight = view.window?.windowScene?.statusBarManager?.statusBarFrame.height ?? 0 let navBarHeight = navigationController?.navigationBar.frame.height ?? 0 let topInset = statusBarHeight + navBarHeight webView.scrollView.contentInset = UIEdgeInsets(top: topInset, left: 0, bottom: 0, right: 0) webView.scrollView.scrollIndicatorInsets = webView.scrollView.contentInset
内容的提问来源于stack exchange,提问作者Amogam
相关产品推荐
相关产品推荐

