移動端網站，鍵盤彈出對頁面的影響

在移動端網站中，ios與安卓鍵盤彈出時對頁面有不一樣的處理方式。

ios，鍵盤彈出但總體頁面高度不變。

安卓，頁面高度=屏幕高度-鍵盤高度

這樣對頁面樣式就會形成不一樣的影響。

當有表單彈窗，且彈窗高度在頁面高度的50%左右時影響尤其嚴重。

在安卓中：彈窗的頭部頗有可能被頂到頁面以外，且沒法滑動察看完整的彈窗信息。

在最近的一個移動端項目中，對滑動部分使用了 calc設置高度（是微信網站，兼容-webkit-。 關於calc的兼容性不甚明白，但在使用的時候彷佛沒遇到兼容性問題（主要是微信網站，測試過的機型包括 iphone4+,）使用vh計算元素高度（vh彷佛也有兼容性問題但一樣沒遇到））

 

但文本框呼出鍵盤時頁面被推起，由於是計算好的高度，底部導航緊貼着鍵盤頂部了。

此時的高度或者是vh再也不根據整個頁面的高度計算。

解決方案：

將頁面的高度固定下來，即先用js不管在文本框得到焦點時，仍是在頁面載入時首先將元素的高度固定下來，並保持body的高度。

這樣鍵盤彈出時頁面的佈局高度不變，並能夠正常的上下滑動。

 

另外移動端的網站頗有必要對一些icon進行預加載，防止點擊時icon閃爍。