状态栏使用 Capacitor 覆盖 iOS 上的 webview

Posted 2023-02-19

【中文标题】状态栏使用 Capacitor 覆盖 iOS 上的 webview

【英文标题】：Status bar overlays webview on iOS with Capacitor

【发布时间】：2019-07-20 22:20:42

【问题描述】：

我想实现与电容器示例相同的状态栏行为，即自动添加正确的填充，这样我的应用内容就不会显示在状态栏中。 但是，我不使用离子框架，而是角度和状态栏覆盖我的应用程序的 web 视图。因此，我的应用程序的内容在状态栏中可见。

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

也许我不应该更改此配置而只使用填充，但是我不知道如何处理不同 ios 设备上不同的状态栏高度。

我是 Capacitor 的新手，我从未使用过 Ionic 或 Cordova。有人可以帮我解决这个问题，我将不胜感激。

【参考方案1】：

借助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);

【参考方案2】：

我在过去使用过的一些应用程序上也遇到过这个问题，直到最近才找到一种干净、不那么老套的方法来修复它。您必须添加safe-area-inset-*，其中* 可以是left、right、top 或bottom。这说明了当设备处于纵向或横向模式时缺口位置的位置。

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