状态栏使用 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-*
,其中*
可以是left
、right
、top
或bottom
。这说明了当设备处于纵向或横向模式时缺口位置的位置。
您可以通过查看此答案https://***.com/a/47895315/4687451了解更多信息
【讨论】:
以上是关于状态栏使用 Capacitor 覆盖 iOS 上的 webview的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 React Native 去除 android 上状态栏上的黑色覆盖
覆盖 UINavigationBar 时 iOS 7 状态栏变黑