相关疑难解决方法(0)

我有一个移动网站,它通过位置固定在屏幕底部的div.一切都在iOS 5中正常工作(我在iPod Touch上测试),直到我在一个带有表单的页面上.当我点击输入字段并出现虚拟键盘时,我的div的固定位置突然丢失.只要键盘可见,div就会随页面滚动.单击完成以关闭键盘后,div将恢复到屏幕底部的位置并遵循位置:固定规则.

有没有其他人经历过这种行为？这是预期的吗？谢谢.

问题:基于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应用程序 - 设备高度/键盘问题 …