首页 > 开发 > HTML > 正文

html5移动端,安卓手机唤起手机键盘会压缩背景

2017-09-09 13:19:08  来源: 网友分享

--css:

#main {    height: 100%;    position: relative;    overflow: auto;    -webkit-touch-callout:none;    -webkit-text-size-adjust:none;    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);    -webkit-user-select:none;    -webkit-overflow-scrolling : touch;    display: none;    background: -webkit-linear-gradient(top,#00f8fe,#0058e8);}.input_border{    height: 1.5rem;    border: 1px solid white;    border-radius: 35px;    position: relative;}#version{    position: absolute;    bottom: 2%;    width: 100%;}

--html:

<div id="main">       ...    <div class="input_border add_margin">        <input type="text" id="user" class="input_login" placeholder="请输入用户名"/>    </div>    <div id="version">            </div></div>

如图所示,当在Android系统下,唤起手机键盘时,背景会被压缩,导致定位在下方的文字上移,
为什么Android环境下,背景高度会随着键盘的出现而降低呢?

解决方案

自问自答

$('body').css({'height':$(window).height()});