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

正常状态下

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

input focus软键盘弹出时

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

问题描述:

头部结构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

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

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

上一篇:Ajax-Demo


下一篇:每日一练-leetcode