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



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

所需的行为是整个页面将被向上推送。

相关代码(我正在使用 React 开发,因此名称很奇怪(

<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>

相关图片:

问题,当键盘弹出时

期望的结果

PS:在使用调试器一段时间后,我发现如果我将应用程序容器/正文/html 的高度设置为固定的像素高度,它不会发生。然而,这不是一个好的解决方案,因为我希望高度是视口的 100%(因此它将与所有设备兼容(。

如何正确修复它?

您可以为键盘div 指定最小高度。
您也可以尝试在vh(视口高度,如input div : 50vh,keyboard :50vh(中划分文本部分和键盘部分,而不是给出height:100%;。请删除所有其他高度。

相关内容

  • 没有找到相关文章

最新更新