我的移动应用程序的顶部有一个div,它的位置是固定的,所以它将保持在浏览器的顶部(它在ios 4中滚动并且更低).当输入焦点并打开键盘时,div向下移动到页面的中间.查看截图：
http://dbanksdesign.com/ftp/photo_2.PNG
编辑：
这是一个简化的测试页面：
http://dbanksdesign.com/test/
<body>
<div class="fixed"><input type="text" /></div>
<div class="content"></div>
</body>
.fixed { position:fixed; top:0; left:0; width:100%; background:#ccc; }
.content { width:100%; height:1000px; background:#efefef; }
解决方法
不幸的是,在使用IOS时,最好使用固定元素的绝对定位.是的,IOS5声称支持固定定位,但是当您在该固定元素中进行交互式控制时,它们都会下降.
我的switchitoff.net网站上的搜索框也有同样的问题.在IOS5中,如果搜索框在页面滚动时获得了焦点,则固定标题将跳到页面.我尝试了各种解决方法,而我目前拥有的是< div>它位于搜索框上.当这个< div>点击下列情况发生：
>页面滚动到顶部
>固定标题更改为绝对
>< div>覆盖搜索框是隐藏的
>搜索< input>集中精力
当搜索框失去焦点时,上述步骤相反.当搜索框被单击时,此解决方案可防止标题跳下页面,但是对于更简单的站点,您可能最好使用绝对定位.
IOS5和固定定位还有一个棘手的问题.如果您的固定区域上有可点击的元素,则身体元素会在其后面滚动,这可能会破坏您的触摸事件.
例如,在switchitoff.net上,当交互元素在其后面滚动时,固定标题上的按钮变得不可点击.当这些按钮被敲击时,touchstart甚至没有被触发.幸运的是,onClick仍然似乎有效,尽管这是因为延迟而永远是IOS的最后手段.
最后注意到(在IOS5中),您可以点击固定的标题并滚动页面.我知道这可以模拟您在普通浏览器中使用滚动条在固定标题上的方式,但是这种范式对于touch-UI来说无益于什么？
希望苹果公司将继续改进固定元件的处理,但如果您在固定区域有任何交互式的话,同时也更容易坚持绝对定位.当事情变得如此简单,那么或者回到IOS4
