Jquery Mobile phonegap垂直内容仅限于IOS上的视口

Question

我有一个相当奇怪的问题，我遇到过jquery mobile / phonegap和IOS。

我已经创建了一个带有html / css的网络应用程序，到目前为止它的工作方式完全符合预期的android，（内容在视口中垂直滚动）但是在ios上（我的测试平台是iphone 4s），页面垂直限制在视口中。它滚动得很好，但是视口下方的所有内容都被垂直切断了，IE显示的唯一内容就是我在页面的上半部分看到的内容，视口下方的任何内容都不会显示。

我的css文件的摘录：

html, body {
min-height:100%;
overflow-x:hidden;
background-attachment:fixed;

}

body {
-webkit-touch-callout: none;                
-webkit-text-size-adjust: none;             
-webkit-user-select: none;             
-webkit-font-smoothing: antialiased;
-webkit-backface-visibility: hidden;
-webkit-overflow-scrolling: touch;

}

和我的html页面，在头部分：

    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1 minimum-scale=1; user-scalable=no" />

这里有一些问题的截图：

从屏幕截图中可以看出，渐变＆＃34;应该＆＃34;填充整个页面（即，随内容展开），并且它不会因为视口边缘处似乎存在硬截止，因此不会显示任何多于一页的内容。虽然在这些屏幕截图中看不到它们，但是垂直滚动条正如它们应该出现并且滚动工作正常，只是没有内容显示和＃34;在折叠下面＃34;。

我没有使用iScroll或任何其他滚动脚本，只是fyi。

我不确定这是否是某种高度问题，因为我有一个最小高度：100％;设置在页面的html和正文上，或者它是否在元标记中出现某种宽度 - 设备宽度问题？我也不相信我有任何溢出y：隐藏集，因为这会限制其他平台上的内容，并且它们完美地工作。

我觉得我必须遗漏一些非常基本的东西，因为我确定 是某种限制内容的css设置仅限于视口，详尽的谷歌搜索无法找到类似的问题。

Answer 1

检查您的应用默认方向是否设置为纵向而不是横向，或者是否支持纵向方向。它看起来几乎就像它在横向模式下显示应用程序，而它的画面清晰。您可以在Target＆gt; General标签或info.plist中找到可用的方向。

Answer 2

所以我已经修好了，奇怪的是，我并不确定我是如何解决这个问题的。

我将.ui-page选择器从jquery-mobile文件移动到我自己的css文件，从html选择器中删除了min-height并从html，body选择器和boom中杀死了overflow-x，它现在出现了按计划工作。古怪......但是嘿，胜利就是胜利。 ：）