Question

我正在开发一款适用于手机的网络应用，我遇到了一个奇怪的问题。我有一个简单的页面，背景图像和输入字段位于页面中间。问题是每当我点击输入框并且虚拟键盘出现时，背景图像和输入字段尺寸将根据剩余的页面空间重新计算。

理想的行为是整个页面都会被推高。

相关代码（我用反应开发，因此有奇怪的名字）

<html>
<head>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <style type="text/css">.location_input__LocationInputStyle___2cLQ9 {
        position: absolute;
        width: 85%;
        height: 10%;
        top: 45%;
        left: 50%;
        transform: translate(-50%);
        background-color: transparent;
        border-radius: 50px;
        border: 3px solid #ffffff;
        text-align: center;
        font-size: 22px;
        color: #ffffff;

    }
    </style>
    <style type="text/css">.home_page_container__HomePageStyle___2f5vW {
        position: relative;
        width: 100%;
        height: 100%;
        background-image: url(86349e48855062e70072f79443fe0af6.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 40% 0;
    }
    </style>
</head>
<body>
<div id="app">
    <div class="home_page_container__HomePageStyle___2f5vW">
        <input type="text" class="location_input__LocationInputStyle___2cLQ9" placeholder="Address">
    </div>
</div>
</body>
</html>

相关图片：

The problem, when keyboard pops up

Desired result

P.S：稍微调试一下调试器后，我发现如果我将app容器/ body / html的高度设置为固定的像素高度，它就不会发生。然而，这不是一个好的解决方案，因为我希望高度为视口的100％（因此它将与所有设备兼容）。

如何正确修复？

Answer 1

您可以指定键盘div的最小高度您还可以尝试在vh（视口高度，例如input div : 50vh,keyboard :50vh）中分割文本部分和键盘部分，而不是提供height:100%;。请删除所有其他高度。

虚拟键盘会改变我的页面高度

1 个答案: