アプリのフロントサイドを担当しております。
キーボード表示時にレイアウトが崩れる(portraitからlandscapeレイアウトにチェンジ)のをどうにかしたいです。
前提条件:
・高さは画面いっぱい(100vh)
・はみ出し部分は非表示 overflow:hidden
・メディアクエリで横向きと縦向きによりレイアウト変更
bottomにコメント欄があり、フォーカスが合うとキーボードが表示されその分コメント欄が上に引き上げられます。
Iphoneでは全体が上に引き上げられ、上に消えた部分はスクロールで表示できます。
ですが、Androidの場合はキーボード分だけ高さが削られスマホが縦向きから横向きと判断され、レイアウトが変わってしまいます。
方法を調べたところ
マニフェストファイルにandroid:windowSoftInputModeを設定するとウィンドウのサイズは変更しないみたいなことが
いくつかの記事に書かれていましたが、マニフェスト?Activity?という感じで
これしか方法がないならこれから習得しないといけませんが、時間がかかるのでもっと他の方法あればぜひ知りたいです。
(使える言語はHTML,CSS,JSのみです)
イメージ図でいうと以下の感じです。
左から通常表示、キーボード表示(Iphone)、キーボード表示(Android)、キーボード表示(Android縦横レイアウト同じ)
html
1<html> 2 <body> 3 <div class="overflow"> 4 <div class="content_a"> 5 . 6 . 7 . 8 </div> 9 <div class="content_b"> 10 <textarea rows="5" cols="80"></textarea> 11 </div> 12 </div> 13 </body> 14</html>
css
1html{ 2 width: 100vw; 3 height: 100vh; 4 position: relative; 5} 6body{ 7 height: 100%; 8 width: 100%; 9} 10.overflow{ 11 overflow: hidden; 12 position: relative; 13 height: 100%; 14 width: 100%; 15} 16.content_b{ 17 position: absolute; 18 bottom: 0; 19 width: 100%; 20} 21 22//横向き 23@media (max-width: 896px) and (orientation: landscape) 24.content_a{ 25 height: 100vh; 26} 27.content_b{ 28 opacity: 0; 29}
あなたの回答
tips
プレビュー