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
    }
}