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

Posted

技术标签:

【中文标题】状态栏使用 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-*,其中* 可以是leftrighttopbottom。这说明了当设备处于纵向或横向模式时缺口位置的位置。

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

【讨论】:

以上是关于状态栏使用 Capacitor 覆盖 iOS 上的 webview的主要内容,如果未能解决你的问题,请参考以下文章

如何在iOS6中停止状态栏覆盖导航栏

如何使用 React Native 去除 android 上状态栏上的黑色覆盖

iPhone X 上的导航栏不覆盖状态栏

覆盖 UINavigationBar 时 iOS 7 状态栏变黑

IBM Worklight 6.1 - iOS 7 状态栏覆盖 HTML 中的元素

iOS9用自定义uiwindow覆盖状态栏 - 位置错误