移动端软键盘遮挡住页面

移动页面在设定页面为一屏页面的时安卓手机调取软键盘会出现软键盘遮挡住页面内容的情况。这样的用户体验肯定不好。那怎么解决那？
如图我们在安卓手机中实现这样的效果

输入用户名和密码时，系统会弹出键盘，造成系统键盘会挡住文本框的问题，如图所示：

Paste_Image.png

当然安卓开发工程师肯定有更好的解决方案，但是作为前端来说我有自己的解决方案有（这个方案也许不是最优的还望指教）
html:

<div class="warp"> 
  <p><img src="img/header-img.png" width="100%"/></p>  
     <div class="list-form">
         <form>
             <ul>
                 <li class="clearfix">
                     <label>用户名</label>
                     <input type="text" class="tele-number" placeholder="" />                  
                 </li>
                 <li class="clearfix">
                     <label>密码</label>
                     <input type="text" class="number"/>
                 </li>           
             </ul>
         </form>
     </div>
</div>

这里要注意的是warp的样式
css：

.warp {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

这里的重点就使用js进行处理最外层的div的样式，那怎么处理？
首先通过height获取body的实际高度
其次当调取软键盘的时候把这里的height付给最外层的div
最后当取消软键盘的输入的时候就把最外层的div的height转化为100%
这样基本就实现了想要的效果
因为ios手机的软键盘是遮挡不住页面的
所以我要判断机型不是ios的系统就好了。
js:

$(function(){
    if (!/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
        var loaclHeight = $("body").height();
        $("input[type=text]").focus(function() {
            $(".warp").css("height",loaclHeight+"px")
        }).blur(function(){
            $(".warp").css("height","100%")
        });

    }
})