状态栏在带有电容的iOS上覆盖Webview

时间:2019-02-27 08:46:56

标签: ios cordova ionic-framework capacitor ios-statusbar

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

我期望有一种方法可以更改此行为(如离子本机状态栏的_ overlaysWebView_方法)。 我还尝试在 config.xml 文件中添加<preference name="StatusBarOverlaysWebView" value="false" />,但是我不知道是否应该安装cordova s​​tatusbar插件。

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

我是电容器的新手,而且从未使用过Ionic和Cordova。我会帮助我解决这个问题,非常感谢。

3 个答案:

答案 0 :(得分:1)

感谢jcesarmobile在the issue上打开的电容器github上的回复,我设法通过在应用程序中设置正确的填充来解决问题。

这篇文章对我有很大帮助:https://webkit.org/blog/7929/designing-websites-for-iphone-x/

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

答案 1 :(得分:0)

您当然应该安装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" />

答案 2 :(得分:0)

我在过去使用过的某些应用程序上也遇到了这个问题,直到最近才发现了一种干净,简洁的修复方法。您将必须添加safe-area-inset-*,其中*可以是leftrighttopbottom。这说明了当设备处于纵向或横向模式时缺口位置将位于何处。

您可以通过查看此答案https://stackoverflow.com/a/47895315/4687451

了解更多信息