我正在使用jQuery Mobile for iPad横向构建移动应用程序。页面是1024px到768px。当我在桌面（Chorome，Safari，Firefox）上查看它时，它正在渲染（1024x768）。
但是在我将其保存到iPad（iOS 8）上的主屏幕并打开它之后，页面将从底部呈现为修剪（大约20px）。当我从检查器中检查它时，我看到html元素（分配了99.9％高度）呈现为747px高度。 body元素也是如此。
我试图将像素值作为高度，边距，填充等，但是除了一些更大的容器之外似乎都在削减它们。
我还尝试了@viewport规则的一些内容，但没有任何结果。
为什么会发生这种情况以及如何解决这个问题？
答案 0 :(得分：0)
似乎问题出在状态栏上。在默认模式下，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"，底部再次留空，但这次背景颜色为黑色。