将填充顶部添加到Cordova状态栏

Question

我正在尝试使用半透明的statusbar创建一个cordova应用程序。 使用Cordova-plugin-statusbar，我可以处理此结果。 但是，状态栏的内容与本机android状态栏的内容重叠，如下图所示。

还有其他方法可以纠正此问题吗？

谢谢

Answer 1

将这些行添加到您的config.xml文件中：

<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="StatusBarStyle" value="lightcontent" />
<plugin spec="https://github.com/apache/cordova-plugin-statusbar.git" source="git" />

PhoneGap的开发人员全局唯一标识符

Answer 2

cordova-plugin-statusbar增加页面高度，以包括带有设备状态信息的区域，使您的页面区域从屏幕的左上方开始，而不是在设备状态栏下方。 您只需要在状态栏区域添加顶部填充。

HTML：

<div id=".statusBar">...Status bar content...</div>

CSS：

.statusBar{
    position:fixed;
    display:block;
    width: 100vw;
    height: 20px;
    left: 0px;
    top: 0px;
    padding-top: 20px;
}

根据您的预期外观，您可能还希望使用cordova-plugin-device来检测平台状态栏中的任何差异，并相应地修改CSS。