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