这两个例子有一个区别,一个在视口中有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,minimum-scale=1" />
演示：http://run.plnkr.co/plunks/rPoyaB/
编辑链接：http://plnkr.co/edit/rPoyaB
好：用户根据需要滚动到聚焦场.
坏：固定标题完全滚出来,这需要始终保持在屏幕上.该方案是,它将包含一个取消按钮和一个保存按钮,应该始终可以访问.此外,当字段模糊时,标题本身看起来很挤压,直到用户将其向下滚动到视图中,但是如果溢出被禁用,则甚至不能执行此操作.
丑陋的：在我的琐碎,真实的代码上,远离这些简化的例子,有一堆元素绝对位于标题中,以创建一个曲线’tab’效果,它们的对齐完全关闭.
您应该能够打开iOS7 Safari中的每个演示网址,添加到主屏幕,并启动以演示该问题.
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: 07004,07005,
07006,
07007,
07008,
07009,
070010,
070011,
070012,
070013,
070014,070015,
070016,
070017,
070018Related links to ‘input fields do not focus’ issue: 070019,
070020,
070021,
070022,
070023,
070024,
070025,
070026,
070027,
070028
解决方法
fixed position div freezes on page (iPad)
这是Brad Frost的一篇很好的文章,我多年来一直拼命阅读几次,希望能够回答这个困境. –
http://bradfrostweb.com/blog/mobile/fixed-position/
它可以很清楚地回答你的问题.固定定位在手机上打破了,可以用JS进行按摩,但实际上并不完全固定.
您可以解决一个问题,演示2中的“标题故障”只是固定的标题隐藏在绝对定位的#page后面.给你的标题一个z-index为1,这将解决这个问题.
当键盘进入时,标题丢失定位;我甚至不确定这实际上是一个错误,只是浏览器的性质.正在发生的事情是,键盘正在获得关注,在这一点上,您正在处理ios的UI而不是Web浏览器,并且背景中的所有内容都被冻结(包括固定的定位元素和所有其他元素).注意整个屏幕如何滚动,这不是一个内置浏览器功能的网络功能.
