问题:根据给定的 iOS7 Safari 主屏幕网络应用程序示例，我如何才能实现永远不会滚动出 View 的固定持久 header ，以及在点击时滚动到 View 中的表单输入字段？
两个例子有一个区别，一个有height=device-height在视口(viewport)中，另一个没有。
没有设备高度
<meta id="viewport" name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1" />
演示:http://run.plnkr.co/plunks/SU8Csk/
编辑链接:http://plnkr.co/edit/SU8Csk
好处:固定标题在点击字段时不会改变位置/高度。
缺点:如果不手动滚动或按下“下一步”按钮，用户将无法看到焦点区域。这可能非常乏味，尤其是当字段位于不会溢出的页面上时。
有设备高度
<meta id="viewport" name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1, minimum-scale=1" />
演示:http://run.plnkr.co/plunks/rPoyaB/
编辑链接:http://plnkr.co/edit/rPoyaB
好处:用户根据需要滚动到关注的字段。
坏处:固定标题完全滚动到 View 之外，这需要始终保留在屏幕上。场景是，它将包含一个取消按钮和一个应该始终可以访问的保存按钮。此外，当字段模糊时，标题本身看起来会被压扁，直到用户将其向下滚动到 View 中，但如果禁用溢出，他们甚至无法执行此操作。
丑陋之处:在我不平凡的真实代码中，除了这些简化的示例之外，还有一堆元素绝对定位在标题中以创建曲线“制表符”效果，它们的对齐完全消失了。
您应该能够在 iOS7 Safari 中打开每个演示 URL，添加到主屏幕，然后启动以演示该问题。
解决这个问题的最佳方法是什么？
NOTE: I am aware that there are 'bugs' in iOS7 Safari, particularly when it comes to homescreen web apps, however I believe that a workaround may exist related to how I am structuring the page. I have done a large amount of research (see below) but I am struggling to find a solution.
Related links to 'fixed header' issue: Need Fixed Header in ios7+, How does one get a fixed header to stay at the top of the page?, Fixed headers with text fields on mobile safari websites, iOS 5 fixed positioning and virtual keyboard, Issues with fixed header, footer and side bar on ipad / iphone, CSS "position: fixed;" on iPad/iPhone?, Fixed positioning in Mobile Safari, How do I stop my fixed navigation from moving like this when the virtual keyboard opens in Mobile Safari?, web app - device-height / keyboard issue, Div element won't stay at the bottom when ios 7 virtual keyboard is present, iOS web app: disable autofocus on input text field, disappearing position fixed header in ios7 mobile safari, http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/, https://github.com/jquery/jquery-mobile/issues/5532, http://dansajin.com/2012/12/07/fix-position-fixed/
Related links to 'input fields do not focus' issue: webkit-overflow-scrolling forms broken on iOS 7 full-screen web app, Issue with iOS 7 Mobile Safari Scroll Events on Keyboard Up and Down, ios7 issues with webview focus when using keyboard html, How do I focus an HTML text field on an iPhone (causing the keyboard to come up)?, Mobile Safari Autofocus text field, iPad browser requires extra tap after appending input, Tapping text input field on iPhone brings up keyboard, but typing will not put in any text, `-webkit-overflow-scrolling: touch` broken for initially offscreen elements in iOS7, http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html, http://calendee.com/ios-7-kills-forms-in-html5-apps/
最佳答案
你应该看看这个答案 - fixed position div freezes on page (iPad)
这是布拉德·弗罗斯特 (Brad Frost) 的一篇非常好的文章，多年来我自己拼命通读了几遍，希望能找到这个难题的答案。 - https://bradfrost.com/blog/post/fixed-position/
它非常彻底地回答了您的问题。固定定位在手机上是坏掉的，可以用JS按摩，但还不能完全固定。
您可以解决一个问题，演示 2 中的“标题故障”只是隐藏在绝对定位的#page 后面的固定标题。为您的 header 设置 1+ 的 z-index，这将解决该问题。
至于键盘输入时标题丢失定位；我什至不确定这实际上是一个错误，只是浏览器的性质。发生的事情是键盘获得焦点，此时您正在处理 ios 的 UI 而不是 Web 浏览器，并且后台中的所有内容都卡住(包括固定定位的元素和所有其他元素)。请注意整个屏幕是如何滚动的，这不是网络功能，而是内置浏览器功能。
关于css - 修复了持久标题并滚动到聚焦的输入字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22861385/