私のウェブサイトにはプライベートメッセージ機能があります。メッセージウィンドウは固定要素です。
position: fixed;
bottom: 0;
IOSでは、メッセージングウィンドウの最下部にある入力を開くと、キーボードがWebサイト全体を上に押し上げるだけなので、入力内容を確認できます。
ただし、Androidでは、キーボードが単にすべてに重なるため、input要素は表示されなくなります。
IOSとAndroidの両方で機能させるにはどうすればよいですか?
ビューポートの実際のサイズを取得したら、エレメントのbottom:x
値を更新するだけで済みます。
cssでのみ検出できるかどうか尋ねている場合は、cssメディアクエリを調べることをお勧めします。