H5在手机端，尤其是安卓手机，如果用了定位或者用了百分比的元素，很容易在键盘弹起后引起页面错乱：
顺序是先将body设置为相对定位：
<body style="position:relative;height:100%;width:100%;"></body>
再设置里面的.bgin为绝对定位。
在JQ或者JS中，加入以下代码片段（监听页面高度发生变化，为body自定义高度，不要使用100%）。
<script type="text/javascript">
$(function () {
var winHeight = $(window).height(); //获取当前页面高度
$("body").height(winHeight);
});
</script>
具体分析：
在安卓手机中，我们可以把手机屏幕想象成一个大容器，正常情况下，这个大容器只是承载着我们打开H5的浏览器，浏览器可以想象成是手机的一个子容器，正常情况下这个子容器占满了整个屏幕。
然而键盘，可以想象成是和浏览器同级的一个容器，也属于手机的一个子容器。通常情况下，这个子容器是隐藏的，需要的时候弹起来
** 注： **这种假设只在安卓端成立，因为苹果和安卓原本就不一样
在键盘弹起来后，手机屏幕就需要放下2个容器（浏览器+键盘）。所以浏览器所占的高度就小了。
举个栗子：
手机屏幕高度假设为1000px。键盘没弹起情况下，键盘容器高度为0。浏览器高度为1000px，占满整个屏幕。当键盘弹起后，假设键盘高度为300px。那么浏览器只剩下了700px。（能理解这一点很重要）
网友评论