h5 底部导航被虚拟键盘顶起

1、html

<!--底部导航 -->
<nav class="nav">  
            <a href="javascript:;" style="color: #1084FB;">  
                <span class="mui-icon mui-icon-home"></span><br />
                <span>首页</span>  
            </a>  
            <a href="businessManage/rawMaterialslist.html">
                <span class="mui-icon mui-icon-bars"></span><br />  
                <span >原料申请</span>  
            </a> 
            <a href="businessManage/otherMateriallist.html">
                <span class="mui-icon mui-icon-list"></span><br />  
                <span>第三方申请</span>  
            </a>  
            <a href="login.html">  
                <span class="mui-icon mui-icon-contact"></span<br />
                <span>我的</span>  
            </a>  
 </nav>  

2、css

.nav {
    width: 100%;
    border-top: 1px solid #EEEEEE;
    position: fixed;
    bottom: 1px;
    background-color: #fff;
    z-index: 2;
    text-align: center;
}
.nav a {
    display: inline-block;
    width: 23%;
    height: 46px;
    text-align: center;
    margin: 2px 0;
    color: #999999;
}
.nav a span:nth-child(3) {
    font-size: 13px;
}

3、js

/*获取底部导航到顶部的距离*/
var winHeight = $(window).height()-$(".nav").height();
$(window).resize(function(){  //窗口大小改变时
        //窗口大小改变时，获取当前的距离（底部导航到顶部）
        var resHeight = $(window).height()-$(".nav").height();
        if(resHeight!=winHeight) {
            $(".nav").hide();
        }else {
            $(".nav").show();
        }
});