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

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

好处:用户根据需要滚动到焦点字段.

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

丑陋的:在我的非平凡的真实代码中,远离这些简化的例子,有一堆元素绝对位于标题内以创建曲线"标签"效果,这些元素的对齐完全关闭.

---

您应该能够在iOS7 Safari中打开每个演示URL,添加到主屏幕,然后启动以演示该问题.

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

注意:我知道iOS7 Safari中存在"错误",特别是涉及到主屏幕Web应用程序时,但我相信可能存在与我如何构建页面相关的解决方法.我做了大量的研究(见下文),但我很难找到解决方案.

"固定标题"问题的相关链接: ios7 +中需要固定标题,如何获得固定标题以保持在页面顶部？, 修复了移动safari网站上的文本字段标题, iOS 5固定定位和虚拟键盘, ipad/iphone上固定页眉,页脚和侧栏的问题, CSS"位置:固定;" 在iPad/iPhone上？, 固定在Mobile Safari中的定位,当在Mobile Safari中打开虚拟键盘时, 如何阻止我的固定导航像这样移动？, web应用程序 - 设备高度/键盘问题,当ios 7虚拟键盘存在时, Div元素不会停留在底部, iOS网络应用程序:在输入文本字段上禁用自动对焦,在ios7移动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-位置固定/

相关链接到"输入字段不关注"的问题: WebKit的溢出滚动形式在iOS 7全屏的Web应用程序打破, 问题与键盘向上和向下的iOS 7移动Safari浏览器滚动事件, 使用键盘时,ios7问题进行的WebView焦点html, 如何将HTML文本字段集中在iPhone上(导致键盘出现)？, Mobile Safari自动对焦文本字段, iPad浏览器在添加输入后需要额外点击, 在iPhone上点击文本输入字段会调出键盘,但键入不会放入任何文本, `-webkit-overflow-scrolling:touch`打破了最初的屏幕外元素在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

你应该看看这个答案 - 固定位置div冻结页面(iPad)

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

它会非常彻底地回答你的问题.固定定位在移动设备上被破坏,它可以用JS进行按摩,但实际上甚至没有完全修复.

你可以解决一个问题,你在演示2中的"标题故障"只是隐藏在绝对定位的#page后面的固定标题.为您的标头提供1+的z-index,这将解决该问题.

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