移动端中软键盘弹出影响页面布局
在一个移动端的页面上的input中输入时，弹出的软键盘会占据window的位置。
如果当前页面的中有绝对定位的元素，例如在页面底部有一个position：fixed;bottom:0;的按钮，当软键盘弹起时，window的高度是窗体的顶部到软键盘之上，底部绝对定位的元素就会覆盖在输入框之上，影响输入。
这个问题一般出现在Android系统中。
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta https-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>安卓端软键盘问题</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
html,body,div{margin: 0;}
.message{height: 100px;}
.input-box{height: 50px;line-height: 50px;margin-top: 10px;padding: 10px;}
.input-box label{display:inline-block;width: 50px;}
.input-box input{width:80%;height: 30px;}
.footer-nav{position: fixed;bottom: 0;width: 100%;height: 50px;line-height: 50px;text-align: center;color: #ffffff;background-color: #055DAD;}
</style>
</head>
<body>
<div class="container">
<div class="message">
页面底部有绝对定位的元素。
</div>
<div class="input-box">
<label>姓名</label>
<input type="text" placeholder="请输入姓名">
</div>
<div class="input-box">
<label>电话</label>
<input type="text" placeholder="请输入电话">
</div>
<div class="input-box">
<label>电话</label>
<input type="text" placeholder="请输入地址">
</div>
<div class="footer-nav">完成提交</div>
</div>
</body>
</html>目前我是实践中解决这个问题是方法是：监控窗体的大小变化resize事件，窗体大小变化超过一定的阈值时，判断为软键盘弹出，弹出后将body元素的高度设置为软键盘弹出前的高度，软键盘关闭后将body元素的高度设置为100%
<script>
var winHeight = $(window).height(); //获取当前页面高度
$(window).resize(function() {
//当窗体大小变化时
var thisHeight = $(this).height(); //窗体变化后的高度
if (winHeight - thisHeight > 50) {
/*
软键盘弹出
50是设置的阈值，用来排除其他影响窗体大小变化的因素，比如有的浏览器的工具栏的显示和隐藏
*/
$('body').css('height', winHeight + 'px');
} else {
/*
软键盘关闭
*/
$('body').css('height', '100%');
}
});
</script>