End mobile soft keyboard pop-up page layout issues affecting

Mobile terminal in soft keyboard pops up affect the page layout

When entering the input page on a mobile terminal, the pop-up soft keyboard will occupy the position of the window.
If the current page has absolutely positioned element, for example at the bottom of the page has a position: fixed; bottom: 0; button when the soft keyboard bounce, is a top height of the window to form a soft keyboard on the bottom absolutely positioned elements will be overlaid on top of the input box, affect the input.
This problem usually occurs in the Android system.

<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>

I am currently in practice to solve this problem is to: monitor changes in the size of the form resize event, change form size exceeds a certain threshold value, it is determined soft keyboard pop, pop elements after the body height to the front soft keyboard pops up the height of the body element will close the soft keyboard height set to 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>

Mobile terminal in soft keyboard pops up affect the page layout

Guess you like