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

Posted 2023-03-15

【中文标题】jQuery Mobile phonegap 垂直内容仅限于 IOS 上的视口

【英文标题】：Jquery Mobile phonegap vertical content limited to viewport on IOS

【发布时间】：2013-10-10 06:22:40

【问题描述】：

我在使用 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页面，在head部分：

    <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" />

这里有几个实际问题的屏幕截图：

正如您从屏幕截图中看到的那样，渐变“应该”填充整个页面（即，随着内容扩展），并且它不会因为在视口边缘似乎有硬截断，所以不再有比一页内容没有显示。虽然在这些屏幕截图中不可见，但垂直滚动条按应有的方式显示，并且滚动工作正常，只是“首屏下方”没有显示任何内容。

我没有使用 iScroll 或任何其他滚动脚本，仅供参考。

我不确定这是否是某种高度问题，因为我有一个 min-height:100%;在页面的 html 和正文上设置，或者如果它是元标记中的某种宽度设备宽度问题？我也不相信我有任何 overflow-y:hidden 集，因为这会限制其他平台上的内容，而且它们工作得很好。

我觉得我一定错过了一些非常基本的东西，因为我确信它是 got 是某种将内容限制在视口中的某种 css 设置，以及详尽的谷歌搜索找不到类似的问题。

【参考方案1】：

检查您的应用默认方向是否设置为纵向而不是横向，或者它是否支持纵向。它几乎看起来像是在以横向模式显示应用程序，而在纵向模式下则清晰可见。您可以在 Target>General 选项卡或 info.plist 中找到可用的方向。

【讨论】：

嗨，乔，我检查了我的 xcode 项目设置，我选择的唯一方向是纵向。我还查看了目标>信息部分，支持的方向也有纵向。问题，即使我不小心只选择了风景，它不会滚动两个方向，以显示不适合视口的内容吗？我还注意到视口窗口中有一个非常浅的灰色背景（内容块默认颜色？），我不确定这是否重要。

是的，如果您不小心将其设置为横向，它通常会滚动两个方向，但由于您将溢出-x 隐藏，它会阻止您这样做。您的元标记的格式也很奇怪。试试

嗨，乔，我的元标记与您发布的有何不同？他们看起来和我一模一样。我一定还没醒。滚动功能工作正常，我只是不明白为什么 IOS 中没有显示任何折叠下方的内容。更新：我刚刚将我的 xcode 更新为 5.0，将 phonegap 更新为 3.0，我在 xcode 中仔细检查了我的方向，但我仍然遇到这个问题。我认为我的下一个测试步骤是构建一个新的 phonegap 项目并省略 jquery mobile，看看我是否可以得到一个包含大量文本的页面来正确滚动/显示。那我就知道是不是jquery mobile的问题了。

元标记不同，因为您的包含“;”在将每个值设置为最大比例和最小比例之间缺少一个之后。我发布的元标记改为逗号。

哎呀！傻我！我的错！感谢乔抓到！

【参考方案2】：

所以我已经修复了它，但奇怪的是，我不确定我做了什么来解决这个问题。

我将 .ui-page 选择器从 jquery-mobile 文件移动到我自己的 css 文件，从 html 选择器中删除了 min-height 并从 html、body 选择器和繁荣中删除了溢出-x，它现在出现了按预期工作。古怪...但是，嘿，胜利就是胜利。 :)