解決h5安卓手機軟鍵盤彈起佈局壓縮變形
阿新 • • 發佈：2019-01-10
<!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; }
每次記錄一點點，每次進步一點點