IBM Worklight - iOS 7 状态栏与应用程序的 HTML 重叠答案

【问题标题】：IBM Worklight - iOS 7 status bar overlaps app's HTMLIBM Worklight - iOS 7 状态栏与应用程序的 HTML 重叠
【发布时间】：2013-11-15 21:37:06
【问题描述】：

在我的应用程序中，HTML 的顶部位于状态栏的一半。我在该部分中有一个按钮，现在无法单击。

我不知道它为什么会这样做。我有标准视口线（“width=device-width”）。
有什么想法吗？或者如何调整？

【问题讨论】：

设置“marginTop”对于打开的屏幕非常有效（看起来很棒）......但是一旦我切换页面（.changePage（））它就会恢复重叠。我做错了什么？
您正在加载的其他页面可能会加载不同的 div，如果该 div 没有收到与原始 div 相同的样式，问题将再次出现。

标签： ios jquery-mobile ibm-mobilefirst

【解决方案1】：

除了上面 Idan 给出的步骤之外，您还可以尝试在 iOS 中使用一种隐藏状态栏的首选项。

尝试将以下方法添加到应用的根视图控制器：

(BOOL)prefersStatusBarHidden { 返回是； }

或者你可以在确定iOS版本后在顶部添加20px的空间

函数 onDeviceReady() {
if (parseFloat(window.device.version) === 7.0) {
       document.body.style.marginTop = "20px";
} 
}

document.addEventListener('deviceready', onDeviceReady, false);

【讨论】：

我不建议这样做，除非您正在寻找隐藏状态栏；在大多数应用程序中，状态栏仍然是可取的，因此需要确保使用正确的版本。
嗨 Idan，这不是我的问题，我提出了一个我们在这里使用的替代方案，这个问题属于 Stakutis。我不知道他最终采用了哪种方法:)

【解决方案2】：

确保您遵循 IBM 提供的关于 iOS 7 支持的指南，并使用包含此支持的最新版本的 Worklight。

您可以在此处阅读更多相关信息：

IBM Worklight Versions 6.0.0 and 5.0.6 Support Apple iOS 7

我还看到您提到使用 jQuery Mobile...
那么，也许你应该看看在 7.x 中看起来还可以的Worklight Starter jQuery Mobile edition；看看 CSS。

如果您没有提供演示应用程序以了解您对应用程序的确切样式，则无法给出更全面的答案。

你的评论：

设置“marginTop”对于开始屏幕非常有效（看起来太棒了）......但是一旦我切换页面（.changePage（））它就会回到重叠。我做错了什么？

我的猜测是，您正在加载的其他页面可能会加载不同的 div，如果该 div 没有收到与原始 div 相同的样式，问题将再次出现。

【讨论】：