登录界面，body上有背景图，点击输入框时，弹出的手机键盘会把背景图顶变形，而且会把footer顶上去
Posted xi-li
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了登录界面，body上有背景图，点击输入框时，弹出的手机键盘会把背景图顶变形，而且会把footer顶上去相关的知识，希望对你有一定的参考价值。
js：
//防止背景图被手机键盘压缩变形 $(document).ready(function () { $(‘body‘).css({‘height‘:$(window).height()}) }); //当点击input出现手机键盘时，窗口大小改变，隐藏footer以防止footer被手机键盘顶上来 $(function(){ var oHeight = $(window).height(); //浏览器当前的高度 $(window).resize(function(){ //当浏览器窗口的大小改变时，发生 resize 事件。 if($(window).height() < oHeight){ $("#hui-footer").css("display","none"); }else{ $("#hui-footer").css("display","inline-flex"); } }); })
css：
html,body{ height: 100%; //让没有内容的body撑起满屏 } body{ position: relative; background: url(img/register.jpg) center no-repeat; background-size: cover; } .hui-form{ position: absolute; top: 25%; padding:10px; opacity: 0.7; }
表单根据body定位，这样表单里的输入框那块就不会被手机键盘顶上去,body{ position: relative;}这个地方很重要。
html：
<body> <div class="hui-wrap"> <div class="hui-form"> <form id="form1" action="" method="post"> <div class="hui-form-items"> <div class="hui-form-items-title">手机号码</div> <input type="number" id="phone" name="phone" class="hui-input hui-input-clear" placeholder="请输入手机号码" value="18614522541"/> </div> <div class="hui-form-items"> <div class="hui-form-items-title">验证码</div> <input type="text" id="vertify" name="vertify" class="hui-input hui-input-clear" placeholder="请输入短信验证码" value="4006337707"/> <button id="icode1" type="button" class="hui-button hui-primary hui-button-small hui-fr identicode">获取验证码</button> </div> </form> <div style="padding:20px 8px;"> <button id="loginbtn" type="button" class="hui-button hui-primary hui-button-large">登陆</button> </div> </div> <div id="hui-footer" class="footer"> <div class="followup" id="delete" style="background-color: #007AFF;">确定</div> <div class="followup" id="allot">取消</div> </div> </div> </body>
以上是关于登录界面，body上有背景图，点击输入框时，弹出的手机键盘会把背景图顶变形，而且会把footer顶上去的主要内容，如果未能解决你的问题，请参考以下文章