在移动端网站中,ios与安卓键盘弹出时对页面有不同的处理方式。
ios,键盘弹出但整体页面高度不变。
安卓,页面高度=屏幕高度-键盘高度
这样对页面样式就会造成不同的影响。
当有表单弹窗,且弹窗高度在页面高度的50%左右时影响尤为严重。
在安卓中:弹窗的头部很有可能被顶到页面之外,且无法滑动察看完整的弹窗信息。
在最近的一个移动端项目中,对滑动部分使用了 calc设置高度(是微信网站,兼容-webkit-。 关于calc的兼容性不甚明白,但在使用的时候似乎没遇到兼容性问题(主要是微信网站,测试过的机型包括 iphone4+,)使用vh计算元素高度(vh似乎也有兼容性问题但同样没遇到))
但文本框呼出键盘时页面被推起,因为是计算好的高度,底部导航紧贴着键盘顶部了。
此时的高度或者是vh不再根据整个页面的高度计算。
解决方案:
将页面的高度固定下来,即先用js无论在文本框获得焦点时,还是在页面载入时首先将元素的高度固定下来,并保持body的高度。
这样键盘弹出时页面的布局高度不变,并可以正常的上下滑动。
另外移动端的网站很有必要对一些icon进行预加载,防止点击时icon闪烁。