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

Question

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

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

谢谢

Answer 1

在您的race_num文件中添加以下行：

nan

phonegap-developers-guid

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。