我正在为手机开发一个网络应用程序,我遇到了一个奇怪的问题。我有一个简单的页面,背景图像和页面中间的输入字段。问题是每当我单击输入框并出现虚拟键盘时,都会根据剩余的页面空间重新计算背景图像和输入字段尺寸。
所需的行为是整个页面将被向上推送。
相关代码(我正在使用 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%;
。请删除所有其他高度。