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

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

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

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

这样对页面样式就会造成不同的影响。

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

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

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

 

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

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

解决方案：

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

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

 

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

转载于:https://www.cnblogs.com/rohanCh/p/7383673.html