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

问题描述

问 题

--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()});

这篇关于javascript - html5移动端,安卓手机唤起手机键盘会压缩背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！