狀態欄覆蓋 webview on iOS with Capacitor

Question

我想實現與電容器示例中相同的狀態欄行為，即自動添加正確的填充，這樣我的應用程序內容就不會顯示在狀態欄內。 但是，我不使用離子框架，而是使用 angular，狀態欄覆蓋了我的應用程序的 webview。 因此，我的應用程序的內容在狀態欄中可見。

我期待一種允許更改此行為的方法（如 ionic 本機狀態欄的 _ overlaysWebView_ 方法）。 我還嘗試在config.xml文件中添加<preference name="StatusBarOverlaysWebView" value="false" />但我不知道是否應該安裝 cordova 狀態欄插件。

也許我不應該更改此配置而只是玩填充，但我不知道如何處理不同 iOS 設備上的不同狀態欄高度。

我是 Capacitor 的新手，我從未使用過 Ionic 或 Cordova。有人可以幫我解決這個問題，我將不勝感激。

Answer 1

感謝jcesarmobile對我在電容器github上打開的問題的答復，我設法通過在應用程序中設置正確的填充來解決問題。

這篇文章對我有很大幫助： https : //webkit.org/blog/7929/designing-websites-for-iphone-x/ 。

我不必安裝cordova插件或配置任何配置文件。

Answer 2

當然，您應該安裝statusbar插件。

https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-statusbar/

您必須了解cordova應用程序的開發知識，當您從插件文檔中獲取信息時，必須進行安裝。

您可以添加它，並將其添加到您的config.xml中：

<plugin spec="https://github.com/apache/cordova-plugin-statusbar.git" source="git" />

Answer 3

由於env變量，您可以直接在 css 代碼中設置填充。 它僅適用於 iOS，因此可以應用於您需要的任何標簽。

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

Answer 4

這可以通過在 CAPViewBridgeController 中添加以下行來實現

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

搜索以下function並更新。 function 應該是這樣的

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

Answer 5

我在過去使用過的一些應用程序上也遇到過這個問題，直到最近才找到一種干凈、不那么笨拙的修復方法。 您必須添加safe-area-inset-*其中*可以是left 、 right 、 top或bottom 。 這說明了當設備處於縱向或橫向模式時凹口位置的位置。

您可以通過查看此答案來了解更多信息https://stackoverflow.com/a/47895315/4687451