1
私は携帯電話用のWebアプリケーションを開発しています。私は奇妙な問題を抱えています。 私は背景画像と入力フィールドの中央にページの中央にある単純なページを持っています。 問題は、入力ボックスをクリックして仮想キーボードが表示され、背景イメージと入力フィールドの寸法が残りのページスペースに従って再計算されるときです。仮想キーボードが私のページの高さを変更します
望ましい動作は、ページ全体が押し上げられることです。
関連するコード（私が開発してい奇妙な名前は、したがって、反応）
<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） –