You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

为什么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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.07 04:06:03