最近做微信項(xiàng)目，遇到一個(gè)問題，與大家分享一下我的解決方法。

問題描述：

fixed布局的輸入框在IOS手機(jī)的微信內(nèi)置瀏覽器上打開，當(dāng)輸入框focus喚起軟鍵盤后，輸入框會(huì)彈到頁面的中間位置，如圖：

問題現(xiàn)象圖

問題原因分析：

當(dāng)喚起軟件盤之后，position：fixed布局已經(jīng)失效。

解決思路：

既然fixed布局失效，那就不用fixed布局，改用position：absolute布局。

解決方案：

我們常規(guī)的固定在底部輸入框的布局代碼

Html：

Html

Css：

Css

以下是修改之后的代碼：

Html不需要做任何修改，Css修改如下：

input

container

添加Js控制container的高度：

Js

改變Input的布局，由fixed改為absolute，固定container的高度為瀏覽器窗口的高度，并添加overflow：scroll屬性，將其變?yōu)橐粋€(gè)scrollview，屬性-webkit-overflow-scrolling: touch，是為了讓scrollview滑動(dòng)起來有彈性的效果，ios的微信內(nèi)置瀏覽器改變了此屬性。

附上效果圖：

修復(fù)bug后的效果圖

如果想查看源代碼，點(diǎn)此鏈接：查看源碼

更新：這樣處理在IOS上顯示有改善，但是在Android手機(jī)上存在問題，簡(jiǎn)單暴力的繞過方法，還是判斷一下終端吧，Android手機(jī)上用position：fixed更好。如果有更好的方法，歡迎交流。