"Fixed" header 和在 iOS 7.1.2 上的 Web-app 中间滚动的页脚
"Fixed" header and footer with scrolling middle in Web-app on iOS 7.1.2
我创建了一个非常简单的演示 web-app，core-layout, using AngularJS with optional support for using iScroll 5. (Update: the version linked to on GitHub pages is now fixed, as shown in my answer below. If you want to see how this problem behaved, either look at the attached images or checkout version v1.2.1 并在本地构建示例）。
我知道 CSS position: fixed 在 iOS 7.x 上的元素存在问题。例如，when you activate input elements, fixed positioned elements move around, and I've read about how Google's Gmail team had to turn off native scrolling and animate the scrolling area themselves。因此，当 iScroll 切换为 on 时，我让应用程序布局在 header 和页脚上使用 CSS position: absolute 指令。但是，如果将 iScroll 切换为关闭，布局将使用position:fixed，这在移动设备和桌面上的较新浏览器中都非常适用。
我已经手动测试了该应用程序在多个移动设备上的呈现和行为是否符合预期，包括 iOS 和 Android 设备。
但是，在 iPhone 5s 的 Safari 中 iOS 7.1.2，iScroll on，header 隐藏在后面Safari 的地址栏，并且页脚在屏幕上渲染得太低，所以它隐藏在 Safari 的页脚菜单后面，如下面的屏幕截图所示：
然后，当我设法抓住 header 菜单时，我可以将其向下拉，这样 header 菜单就可以看到了，但页脚菜单仍然隐藏：
如果我然后设法向上推动 header 菜单，页脚菜单就会滑入屏幕底部，在 Safari 自己的页脚菜单上方可见：
如果我关闭 iScroll ，从而也更改为 header 和页脚菜单 position: fixed 的位置。 all renders OK，但是滚动区域没有动量（因此感觉有点不对劲），我可能不得不与输入时在屏幕上跳来跳去的 fixed-position 元素作斗争字段被激活（触发 iOS' on-screen 键盘）：
当我在 iPad 运行 iOS 7.0.6 上测试相同的 web-app 时，没有出现同样的问题。
当然可以在 GitHub 上获得源代码。现在，我想知道我做错了什么以及如何解决这个问题？
我回到了相关来源之一，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 中对它的解释不同。
我创建了一个非常简单的演示 web-app，core-layout, using AngularJS with optional support for using iScroll 5. (Update: the version linked to on GitHub pages is now fixed, as shown in my answer below. If you want to see how this problem behaved, either look at the attached images or checkout version v1.2.1 并在本地构建示例）。
我知道 CSS position: fixed 在 iOS 7.x 上的元素存在问题。例如，when you activate input elements, fixed positioned elements move around, and I've read about how Google's Gmail team had to turn off native scrolling and animate the scrolling area themselves。因此，当 iScroll 切换为 on 时，我让应用程序布局在 header 和页脚上使用 CSS position: absolute 指令。但是，如果将 iScroll 切换为关闭，布局将使用position:fixed，这在移动设备和桌面上的较新浏览器中都非常适用。
我已经手动测试了该应用程序在多个移动设备上的呈现和行为是否符合预期，包括 iOS 和 Android 设备。
但是，在 iPhone 5s 的 Safari 中 iOS 7.1.2，iScroll on，header 隐藏在后面Safari 的地址栏，并且页脚在屏幕上渲染得太低，所以它隐藏在 Safari 的页脚菜单后面，如下面的屏幕截图所示：
然后，当我设法抓住 header 菜单时，我可以将其向下拉，这样 header 菜单就可以看到了，但页脚菜单仍然隐藏：
如果我然后设法向上推动 header 菜单，页脚菜单就会滑入屏幕底部，在 Safari 自己的页脚菜单上方可见：
如果我关闭 iScroll ，从而也更改为 header 和页脚菜单 position: fixed 的位置。 all renders OK，但是滚动区域没有动量（因此感觉有点不对劲），我可能不得不与输入时在屏幕上跳来跳去的 fixed-position 元素作斗争字段被激活（触发 iOS' on-screen 键盘）：
当我在 iPad 运行 iOS 7.0.6 上测试相同的 web-app 时，没有出现同样的问题。
当然可以在 GitHub 上获得源代码。现在，我想知道我做错了什么以及如何解决这个问题？
我回到了相关来源之一，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 中对它的解释不同。