从底部截取的主屏幕网络应用程序

Question

我正在用jQuery Mobile为iPad横向打造移动应用程序。页面为1024px到768px。当我在桌面（Chorome，Safari，Firefox）上查看它时，它应该呈现（1024x768）。

但是，在将它保存到iPad（iOS 8）上的主屏幕并将其打开后，页面呈现为从底部裁剪（大约20像素）。当我从检查员那里检查它时，发现html元素（其高度为99.9％）呈现为747px的高度。 body元素也是如此。

我试图给像素值的高度，边距，填充和所有，但一些更大的容器似乎是剪辑它们。

我也尝试了一些与@viewport规则的东西，但没有出来。

任何想法，为什么发生这种情况，我该如何解决这个问题？

Answer 1

看来问题是关于状态栏。在默认模式下，iOS会将状态栏下的所有HTML文件拉出来，但将视口大小设置为留出空间（height: 748px）。所以748px下方的空格将留空，以显示白色背景。

当我将在我的HTML文件的头部下方的线条，问题解决了（视口高度为768px -landscape）

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> 

我然后与内容属性不同的值试过首先用content="black"，然后用content="default"。在后者中，它与没有元标记一样。随着content="black"，底部再次留空，但这次的背景颜色为黑色。