带有 Cordova 的 jQuery Mobile - 标题与 iOS 状态栏重叠

Posted 2023-03-15

【中文标题】带有 Cordova 的 jQuery Mobile - 标题与 iOS 状态栏重叠

【英文标题】：jQuery Mobile with Cordova - Header overlapping with iOS Status Bar

【发布时间】：2015-09-11 02:57:50

【问题描述】：

我刚刚开始使用 Apache Cordova 和 jQuery Mobile，整个 shebang 对我来说都是新的。我的标题（带有“HEADER！”的有用文本）在ios模拟器上的状态栏（时间）上方/下方有问题。我知道我可以做类似style="margin-top: 1.3em;" 这样的事情，这会解决这个问题，但我认为这个问题有适当的解决方法吗？我知道我可以使用 Cordova 关闭状态栏，但我想保持打开状态并简单地放置标题。

html is in a gist。

截图：

Cordova 版本 -- 5.3.1 iOS 模拟器 -- 8.4 操作系统 -- Apple OSX 10.10.4 jQuery -- 2.1.4 jQuery Mobile -- 1.4.5

【参考方案1】：

要让状态栏仍然可见但不被覆盖，您必须安装 cordova-plugin-statusbar 并在 onDeviceReady 内的启动例程中进行设置：

        StatusBar.overlaysWebView(false);

根据您的应用风格设置背景颜色也很有用：

        StatusBar.backgroundColorByHexString("#333"); // => #333333  

希望这会有所帮助！

【讨论】：

这 100% 正是我正在寻找的答案。非常感谢！