如何防止 android 虚拟键盘遮挡内容？引导程序 4

Question

我正在解决以下问题。我有一个这样的“导航栏”：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#">PPŘ</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <li class="nav-item active">
            <a class="nav-link dropdown-toggle" href="#">ŠKOLENÍ<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link dropdown-toggle" href="#">ODKAZY</a>
        </li>
        <li class="nav-item">
            <a class="nav-link dropdown-toggle" href="#">LEGISLATIVA</a>
        </li>
        <li class="nav-item">
            <a class="nav-link dropdown-toggle" href="#">INFO PORTÁL</a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link" href="#login" data-toggle="collapse" role="button"
                data-toggle="dropdown" data-target="#loginDropdown" aria-haspopup="true" aria-expanded="false">Přihlásit se</a>
            <!-- Přihlašovací formulář -->
            <div class="dropdown-menu" id="loginDropdown" style="max-height:200px; overflow-y:auto; position: relative">
            <form class="px-4 py-3">
                <div class="form-group">
                    <label for="exampleDropdownFormEmail1">Email</label>
                    <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
                </div>
                <div class="form-group">
                    <label for="exampleDropdownFormPassword1">Heslo</label>
                    <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Heslo">
                </div>
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="dropdownCheck">
                    <label class="form-check-label" for="dropdownCheck">Pamatuj si mně</label>
                </div>
                    <button type="submit" class="btn btn-primary">Login</button>
            </form>
            <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Jsi zde po prvé? Registruj se!</a>
            </div>
        </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Hledej..." aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Vyhledat</button>
    </form>
</div>

它可以在台式计算机上完美运行。但问题出在移动设备上。 单击导航栏中的“登录”选项后，将打开登录表单。当您单击此表单的输入字段并打开一个虚拟键盘时会出现问题，该键盘几乎涵盖了整个登录表单。我希望 android 虚拟键盘将这个登录表单相互叠加。

我试图解决这个问题。定义元素与表单的相对位置。像这样：

<div class="dropdown-menu" id="loginDropdown" style="max-height:200px; overflow-y:auto; position: relative">

但是，问题无法解决。非常感谢。

Answer 1

当设备键盘打开时，实际视口大小会减小。这导致了您面临的问题。

解决方案： 您需要添加基于高度的 CSS 媒体查询。您必须在键盘打开时检查视口大小并在媒体查询中添加所需的 CSS。

例如： 下面的媒体查询检查视口的高度并为所有元素添加黑色背景。

@media screen and (max-height: 200px){ //Change 200 to viewport height after keyboard opns
  *{
    background-color: #000;
  }
}