IOS fixed input focus bug

最近做微信项目，遇到一个问题，与大家分享一下我的解决方法。

问题描述：

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更好。如果有更好的方法，欢迎交流。