1
我正在开发手机的网络应用程序，我遇到了一个奇怪的问题。 我有一个简单的页面，背景图片和中间位于页面中间的输入字段。 问题是每当我点击输入框并且虚拟键盘出现时，根据剩余的页面空间重新计算背景图像和输入字段尺寸。虚拟键盘改变我的页面高度
希望的行为是整个页面将被推高。
相关的代码（我与发展中国家反应，因此怪异的名字）
<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
PS：与调试器播放后有一点，我发现，如果我把我的应用程序容器/ body/html的高度设置为固定的像素高度，它不会发生。 然而，这不是一个好的解决方案，因为我希望高度是视口的100％（所以它将与所有设备兼容）。
我该如何解决这个问题？
这是隐藏键盘时的应用程序： [无键盘应用程序]（http://imgur.com/a/9bISr） –