Capacitor-JS 状态栏在 IOS 中重叠

Question

我正在使用带有电容器的 NuxtJS。当我们滚动时，IOS 设备上的顶部状态栏会重叠。我还在 Capacitor.config.json 中添加了 "ios": {"contentInset": "always"} 。

尽管我还包含了 CSS，但它在顶部创建了额外的空间。

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

Answer 1

这可以通过在 CAPViewBridgeController 文件中添加以下行来实现

webView?.frame.origin = CGPoint(x: 0, y: UIApplication.shared.statusBarFrame.size.height)

webView?.frame.size.height = UIScreen.main.bounds.size.height - UIApplication.shared.statusBarFrame.size.height;

搜索以下功能并更新。该函数应该如下所示

extension CAPBridgeViewController: CAPBridgeDelegate {
    internal var bridgedWebView: WKWebView? {
        webView?.frame.origin = CGPoint(x: 0, y: UIApplication.shared.statusBarFrame.size.height)
        webView?.frame.size.height = UIScreen.main.bounds.size.height - UIApplication.shared.statusBarFrame.size.height;
        return webView
    }

    internal var bridgedViewController: UIViewController? {
        return self
    }
}