修复了持久性标题并滚动到焦点输入字段

Question

问题：基于iOS7 Safari中主屏幕Web应用程序的给定示例，如何实现永不滚动出视图的固定持久性标题，以及在点击时滚动到视图中的输入字段？

这两个示例有一个区别，一个在视口中有height=device-height，另一个没有。

---

没有设备高度

<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

好消息：用户可以根据需要滚动到焦点字段。

糟糕：固定标题完全滚出视图，需要始终在屏幕上保留。场景是，它将包含一个取消按钮和一个始终可以访问的保存按钮。此外，当字段模糊时，标题本身看起来被压扁，直到用户将其向下滚动到视图中，但如果禁用溢出，则它们甚至无法执行此操作。

丑陋：在我的非平凡的真实代码中，远离这些简化的示例，有一堆元素绝对位于标题内以创建一条曲线＆＃39;标签＆＃39;效果，它们的排列完全脱离。

---

您应该可以在iOS7 Safari中打开每个演示网址，添加到主屏幕，然后启动以演示此问题。

解决此问题的最佳方法是什么？

  

注意：我知道有错误＆＃39;在iOS7 Safari中，特别是当涉及到主屏幕web应用程序时，我相信一个   可能存在与我如何相关的变通方法   我正在构建页面。我做了大量的研究（见   下面）但我很难找到解决方案。

     

＆＃39;固定标题的相关链接＆＃39;问题： 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/

     

＆＃39;输入字段的相关链接无法关注＆＃39;问题： 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/

Answer 1

你应该看看这个答案 - fixed position div freezes on page (iPad)

这是布拉德弗罗斯特的一篇非常好的文章，我多年来一直在拼命阅读，希望能够找到解决这个难题的答案。 - http://bradfrostweb.com/blog/mobile/fixed-position/

它完全回答你的要求。固定定位在移动设备上被破坏，可以用JS进行按摩，但实际上甚至没有完全修复。

你可以解决一个问题，你在演示2中的“标题故障”只是隐藏在绝对定位的#page后面的固定标题。给你的标题一个z-index为1+，这将解决这个问题。

当键盘进入时标题丢失定位;我甚至不确定这实际上是一个错误，只是浏览器的本质。正在发生的事情是键盘越来越受关注，此时您正在处理ios的UI而不是Web浏览器，后台的所有内容都是冻结的（包括固定定位元素和所有其他元素）。注意整个屏幕是如何滚动的，这不是一个网页功能，它是一个内置的浏览器功能。