手机端键盘弹出使界面布局混乱解决方法

荆轲刺秦王

在写手机页面的时候，点击 input 框的时候，手机键盘会被唤起，这时候就要注意页面的布局和 input 框的位置是否被改变。如果被改变，可以用下面的方法解决：

原生js：

window.onload = function(e){

   var _body=document.getElementsByTagName('body')[0];
    _body.style.height=_body.clientHeight+"px";

}

JQuery:

$(document).ready(function () {
 　　$('body').height($('body')[0].clientHeight);
});

原理：就是给body加个固定的高度，如果body里面有子元素的布局生发改变，就给改元素加100%的高度，当然了，再实际情况中，如果页面是分层的，可以将 body 换成最外层的div.效果是一样的。