状态栏在使用 Capacitor 的 iOS 系统上会覆盖 Webview。

Question

状态栏在使用 Capacitor 的 iOS 系统上会覆盖 Webview。

ioscordovaionic-frameworkcapacitorios-statusbar

11

我希望实现与 Capacitor 示例中状态栏相同的行为，即自动添加正确的填充，以便我的应用内容不会显示在状态栏内。但是，我没有使用 Ionic 框架，而是 Angular，并且状态栏覆盖了我的应用程序的 Web 视图。因此，我的应用程序内容可见于状态栏。

我期望有一种方法可以改变这种行为（例如 ionic native 状态栏的 _overlaysWebView_ 方法）。我还尝试在 config.xml 文件中添加 <preference name="StatusBarOverlaysWebView" value="false" />，但我不知道是否需要安装 cordova statusbar 插件。

也许我不应该改变这个配置，而只是通过填充来解决问题，但是我不知道如何处理不同 iOS 设备上的不同状态栏高度。

我是 Capacitor 的新手，我从未使用过 Ionic 或 Cordova。如果有人能帮我解决这个问题，我会非常感激。

- SimonC

4个回答

0

这可以通过在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
    }
}

- milind mistry

0

你可以通过 env 变量在 CSS 代码中直接设置你的 <body> 元素的内边距。它只在 iOS 上有效，因此可以应用于任何需要的标签。

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

- Jean Philippe Ardenoy

0

CapacitorJs 可以让 WebView 填满整个设备屏幕，这会使得您的 Web 内容布局位于工具栏下方。这个问题在 iOS 16.1.2 / Capacitor 4.7.1 上仍然存在。

解决此问题的一种方法是为您的 SPA 添加顶部填充或顶部边距，将内容从工具栏中推开。请将以下代码添加到您的 index.html 文件中：

  <head>
      <!-- Set viewport-fit to cover, this enables `env(safe-are-insect-*)` variables -->
      <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  </head>
  <!-- 
      Then use the `env(safe-area-insect-*)` variables 
      to push your content away from the toolbar
      how to do it depends on how you layout your app.
      This is just an example. 
  -->
  <body style="padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);">
    <app-root></app-root>
  </body>

- Duc Vu Nguyen

只要你没有一个“固定”的页眉（就像我有的那样），这个方法就有效。在这种情况下，页眉需要额外的填充，再加上额外的边距，以通过安全区域插入顶部的偏移量来将主要内容向下推。 - undefined

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ikenna Anthony Okafor · Accepted Answer

我在过去的一些应用程序中也遇到了这个问题，最近才找到了一种干净、不那么hacky的修复方法。您需要添加safe-area-inset-*，其中*可以是left、right、top或bottom。这将考虑到设备在纵向或横向模式下刘海的位置。

您可以通过查看这个答案了解更多信息https://dev59.com/3lYN5IYBdhLWcg3whYe3#47895315