最近、ビューポートの下隅に2つの小さなボタンを常に表示する必要がある大きなテキストエリアを持つモバイル Web アプリケーションに取り組んでいます。だから私は基本から始めました：
position: fixed;
bottom: 10px;
これはスムーズに動作し、ターゲット デバイス (iOS >=5、Android >= 2.3) で美しく見えます。ただし、大きなテキストエリアに focus() を指定すると、システムキーボードが表示されると問題が発生します。
iOS ブラウザーでは、キーボードはビューポート上の単なるオーバーレイです。そのため、キーボードがオンになった後もビューポートはその寸法を維持し、キーボードの半分はその下に隠されています。
ほとんどのAndroidデバイスでは、キーボードの外観によりビューポートの高さが小さくなり、残りの領域に収まるため、ここで固定された位置が機能します。ただし、一部の Android デバイスは iOS と同じように機能し、キーボードはオーバーレイとして表示されます。
ユーザー エージェント文字列を使用せずに、これをカバーする最善の方法を考えようとしています。これを普遍的な解決策にしたい。私は次のように理解しました
//check the viewport height
on(focus) -> see if viewport size changed and change position: fixed
しかし、これを行うには、ウィンドウのサイズが変更されるかどうかを確認するために、フォーカス後数秒待つ必要があります + iOS システムのいずれかである可能性があるため、ビューポートが同じままである場合、ボタンをどこに配置すればよいかわかりません（キーボードのサイズが異なります）または動作の悪いAndroidデバイスで。
どう思いますか？