Xcode开发：WebView滚动时内容侵入状态栏问题咨询

嘿，这个问题我之前帮不少开发者踩过坑——这绝对不是iOS Safari浏览器的默认行为，而是你的WebView应用没正确处理状态栏的安全区域导致的。下面给你几个靠谱的修复方案，从原生代码到网页适配都有：

1. 原生WKWebView配置调整 #

如果你的应用用的是WKWebView，先从代码层面把WebView的布局边界卡准：

• 首先在视图控制器里设置edgesForExtendedLayout，让WebView不延伸到状态栏下方：

  override func viewDidLoad() {
      super.viewDidLoad()
      // 不让视图延伸到状态栏/导航栏下方
      edgesForExtendedLayout = .bottom
  }
  

• 要是你需要WebView占满屏幕但内容避开状态栏，可以给滚动视图加顶部内边距：

  let statusBarHeight = UIApplication.shared.statusBarFrame.height
  webView.scrollView.contentInset = UIEdgeInsets(top: statusBarHeight, left: 0, bottom: 0, right: 0)
  // 让滚动指示器也跟着内边距走
  webView.scrollView.scrollIndicatorInsets = webView.scrollView.contentInset
  

2. 网页端CSS安全区域适配 #

如果你的自有网站本身没做iOS安全区域适配，直接在网页的全局CSS里加这段代码，让内容自动避开状态栏区域：

body {
  padding-top: env(safe-area-inset-top);
}

这个方法的好处是，不管WebView怎么配置，网页自身都会预留出状态栏的空间，兼容性拉满。

3. 状态栏样式优化（可选） #

要是你担心状态栏文字和网页内容混在一起看不清，可以调整状态栏样式：

• 先在Info.plist里添加UIViewControllerBasedStatusBarAppearance，值设为YES
• 然后在视图控制器里重写样式方法：

  override var preferredStatusBarStyle: UIStatusBarStyle {
      // 深色文字，适合浅色背景的网页
      return .darkContent
      // 浅色文字的话用 .lightContent
  }
  

一般来说，把原生配置和网页适配结合起来用，就能彻底解决滚动时内容跑到状态栏的问题了。

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