移动端网站，键盘弹出对页面的影响

在移动端网站中，ios与安卓键盘弹出时对页面有不一样的处理方式。

ios，键盘弹出但总体页面高度不变。

安卓，页面高度=屏幕高度-键盘高度

这样对页面样式就会形成不一样的影响。

当有表单弹窗，且弹窗高度在页面高度的50%左右时影响尤其严重。

在安卓中：弹窗的头部颇有可能被顶到页面以外，且没法滑动察看完整的弹窗信息。

在最近的一个移动端项目中，对滑动部分使用了 calc设置高度（是微信网站，兼容-webkit-。 关于calc的兼容性不甚明白，但在使用的时候彷佛没遇到兼容性问题（主要是微信网站，测试过的机型包括 iphone4+,）使用vh计算元素高度（vh彷佛也有兼容性问题但一样没遇到））

 

但文本框呼出键盘时页面被推起，由于是计算好的高度，底部导航紧贴着键盘顶部了。

此时的高度或者是vh再也不根据整个页面的高度计算。

解决方案：

将页面的高度固定下来，即先用js不管在文本框得到焦点时，仍是在页面载入时首先将元素的高度固定下来，并保持body的高度。

这样键盘弹出时页面的布局高度不变，并能够正常的上下滑动。

 

另外移动端的网站颇有必要对一些icon进行预加载，防止点击时icon闪烁。