web-dev-qa-db-ja.com

処理方法Androidキーボードオーバーレイ固定要素?

私のウェブサイトにはプライベートメッセージ機能があります。メッセージウィンドウは固定要素です。

position: fixed;
bottom: 0;

IOSでは、メッセージングウィンドウの最下部にある入力を開くと、キーボードがWebサイト全体を上に押し上げるだけなので、入力内容を確認できます。

iOS

ただし、Androidでは、キーボードが単にすべてに重なるため、input要素は表示されなくなります。

Android

IOSとAndroidの両方で機能させるにはどうすればよいですか?

6
Hillcow

ビューポートの実際のサイズを取得したら、エレメントのbottom:x値を更新するだけで済みます。

cssでのみ検出できるかどうか尋ねている場合は、cssメディアクエリを調べることをお勧めします。

CSSメディアクエリ:max-width OR max-height

0
Martin