ios下input focus弹出软键盘造成fixed元素位置移位

标签：

正常状态下

input focus软键盘弹出时

问题描述：

头部结构fixed，滚动到下部内容区域，input、textarea等focus弹出软键盘时，头部位置偏移被居中(该问题ios7 beta3已修复)，当软键盘关闭时，头部结构位置又恢复正常

安卓手机下，fixed表现要比ios好，不会出现此问题

然而在移动端里，基本上所有手机，页面滚动的时候，任何js都不会执行，所以寻找css的方法(且js方法比较消耗性能)

各类大网站的解决方法：一般是页面上避免悬挂元素，或者有悬挂元素时，避免产生软键盘弹出事件

目前css的解决方法：

头部依旧fixed，中间有input、textarea等部分也fixed，width：100%，top值为顶部高度，bottom：0(如果顶部也fixed，则bottom值为底部高度)，overflow：scroll

缺点：体验差，有卡顿感，且虽然也能滚动，但是手机上显示不出滚动条。

如果你有更好的解决方法，欢迎指点

ios下input focus弹出软键盘造成fixed元素位置移位

标签：

原文地址：http://www.cnblogs.com/zhangwenkan/p/4422576.html