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

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

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

這樣對頁面樣式就會造成不同的影響。

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

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

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

?

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

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

解決方案：

將頁面的高度固定下來，即先用js無論在文本框獲得焦點時，還是在頁面載入時首先將元素的高度固定下來，并保持body的高度。

這樣鍵盤彈出時頁面的布局高度不變，并可以正常的上下滑動。

?

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

轉載于:https://www.cnblogs.com/rohanCh/p/7383673.html

總結

以上是生活随笔為你收集整理的移动端网站，键盘弹出对页面的影响的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。