＆＃34;固定＆＃34;在iOS 7.1.2上的Web应用程序中滚动中间的页眉和页脚

Question

我创建了一个非常简单的演示网络应用程序core-layout，使用AngularJS并可选择支持使用iScroll 5.（更新：the version linked to on GitHub pages现已修复，如我在下面的回答中显示。如果你想看看这个问题的表现，请查看附加的图像或结帐version v1.2.1并在本地构建示例。

我知道iOS 7.x上的CSS position: fixed元素存在问题。例如，when you activate input elements, fixed positioned elements move around，我已经了解了Google's Gmail team had to turn off native scrolling and animate the scrolling area themselves的方式。因此，当iScroll切换 on 时，我在页眉和页脚上使用了应用程序布局使用CSS position: absolute指令。但是，如果iScroll切换 off ，则布局使用position:fixed，这适用于移动和桌面上的新浏览器。

我已手动测试该应用在多个移动设备（包括iOS和Android设备）上呈现并按预期运行。

但是，在带有iOS 7.1.2的iPhone 5s上的Safari中，上有iScroll ，标题隐藏在Safari的地址栏后面，并且页脚上的页脚太低了屏幕，因此它隐藏在Safari的页脚菜单后面，如下面的屏幕截图所示：

然后，当我设法抓住标题菜单时，我可以将其向下拉，以便标题菜单变得可见，但页脚菜单仍然是隐藏的：

如果我设法向上推动页眉菜单，则页脚菜单会滑入屏幕底部，在Safari自己的页脚菜单上方显示：

如果我关闭iScroll ，那么也会更改为使用position: fixed定位页眉和页脚菜单。所有渲染确定，但滚动字段没有动量（因此感觉有点偏离），并且当输入字段被激活时，我可能不得不与固定位置元素在屏幕上跳跃进行对抗（触发iOS＆＃39;屏幕键盘）：

当我在运行iOS 7.0.6的iPad上测试相同的网络应用时，不会出现同样的问题。

源代码当然可以在GitHub上找到。现在，我想知道我做错了什么，这个问题怎么解决？

Answer 1

我回到其中一个相关来源the simple iScroll example（按预期工作，即使在iOS 7.1.2上的Safari中也是如此），并研究了代码，寻找该演示与我的代码之间的重大代码差异。我发现meta viewport标记有不同的值。解决方案实际上非常简单，至少部分有意义。

解决方案是改变

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi">

到

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi">

也就是说，删除height=device-height规范，这在iOS 7.1.2和其他更新的浏览器上的Safari中显然有不同的解释。