最近做微信项目,遇到一个问题,与大家分享一下我的解决方法。
问题描述:
fixed布局的输入框在IOS手机的微信内置浏览器上打开,当输入框focus唤起软键盘后,输入框会弹到页面的中间位置,如图:
问题原因分析:
当唤起软件盘之后,position:fixed布局已经失效。
解决思路:
既然fixed布局失效,那就不用fixed布局,改用position:absolute布局。
解决方案:
我们常规的固定在底部输入框的布局代码
Html:
Css:
以下是修改之后的代码:
Html不需要做任何修改,Css修改如下:
添加Js控制container的高度:
改变Input的布局,由fixed改为absolute,固定container的高度为浏览器窗口的高度,并添加overflow:scroll属性,将其变为一个scrollview,属性-webkit-overflow-scrolling: touch,是为了让scrollview滑动起来有弹性的效果,ios的微信内置浏览器改变了此属性。
附上效果图:
如果想查看源代码,点此链接:查看源码
更新:这样处理在IOS上显示有改善,但是在Android手机上存在问题,简单暴力的绕过方法,还是判断一下终端吧,Android手机上用position:fixed更好。如果有更好的方法,欢迎交流。