状态栏和标题之间的 Cordova Android 空白

Posted 2023-05-06

【中文标题】状态栏和标题之间的 Cordova Android 空白

【英文标题】：Cordova Android white space between status bar and header

【发布时间】：2018-05-02 04:56:40

【问题描述】：

我几乎完成了所有工作，但我似乎无法摆脱图片中标题和状态栏之间的空白

我正在使用带有 Cordova 插件的 Intel XDK 版本 3987。

我们将不胜感激任何消除此错误的帮助！

这是我的源代码：

pastebin.com/fPWJmiD8

【参考方案1】：

在我看来，您的标题元素 (data-role="header") 的边框宽度为 1px，导致整个内容向下移动。

您是否已经尝试从每个标题中删除边框？

CSS：

.ui-header
  border: none !important;

希望这会有所帮助。

【讨论】：

非常感谢您对我的问题感兴趣，正如您所建议的，我添加了您提供的 .ui-header 代码，但不幸的是，它似乎并没有解决问题。

没问题。不幸的是，我无法查看您的 init-dev/app.js 文件来正确运行您的应用程序。您是否在这些文件中运行任何更改 css 的代码？如果是，请删除这些文件以检查是否导致问题。我可以说没有这些文件，白条就消失了。祝你好运！

这是我的 init-dev.js pastebin.com/QnijdXuS 我也尝试删除更改 JS 中 css 的代码，但问题仍然存在。我也尝试过删除 init-dev.js 但也没有任何收获。

我能够解决我的问题，并且我也将我的解决方案发布到我自己的答案中。非常感谢您对我的问题表示关注。

【参考方案2】：

经过几天的摸索、试错和侦探工作，我终于找到了真正的罪魁祸首。

这个问题是因为jQuery Mobile框架在运行时自动将以下类添加到具有data-role =“header”的标题div中：

class="ui-header ui-bar-inherit"

这些类在状态栏和标题之间创建了不需要的边距。

但是，通过在应用程序的运行时执行期间使用 jQuery 删除这些类来解决这个问题。