解决h5安卓手机软键盘弹起布局压缩变形 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="format-detection" content="telphone=no, email=no"/>
    <link rel="stylesheet" href="css/public.css"/>
    <link rel="stylesheet" href="css/index.css"/>
    <title></title>
</head>
<body>
   <div class="logon">
         <div class="logon_input">
             <div class="input_block">
                 <input id="ID" type="text" placeholder = "请输入手机号码" style="width:100%" class="inp"/>
             </div>
             <div class="input_block" style="margin-top:1.5rem;">
                 <input id="password" type="password" placeholder = "请输入密码" style="width:100%" class="inp"/>
             </div>
             <div class="logon_btn">
                 <div id="Button13" onclick ="onchick('one')">登录</div>
             </div>
         </div>
   </div>
   <div class="logon_bg">
       <img src="images/bg.png" alt=""/>
   </div>
</body>
<script src="JS/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="JS/JSindex.js" type="text/javascript"></script>
<script>
    var originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;
    window.onresize=function(){
        var resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;
        if(resizeHeight-0<originalHeight-0){
           $(".logon_bg").hide();
        }else{
            $(".logon_bg").show();
        }
    }
</script>
</html>
.logon{
    width: 100%;
    position: absolute;
    top: 25%;
}
.logon_input{
    width: 85%;margin:auto;
}
.input_block{
    height: 2.5rem;
    border-bottom: 1px solid #e6e6e6;
}
input::-webkit-input-placeholder {
    color: #333333;
    font-size: 1rem;
}
.input_block input{
    line-height: 2.5rem;
    text-indent: 20px;
}
.logon_btn {
    display: inline-block;
    width: 100%;
    background-color: #34C0E2;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    border-radius: 20px;
    padding: .6rem 0;
    margin-top: 2.5rem;
}
.logon_bg{
    position: absolute;
    width:100%;
    bottom: 0;
}

每次记录一点点，每次进步一点点

posted @ 2019-01-10 17:17  前端凯凯  阅读(793)  评论(0)  编辑  收藏  举报