モバイルSafariでiOSキーボードのサイズを確認する方法

Question

現在、モバイルSafariを対象としたWebページに提案UIを作成しようとしています。主なコンポーネントは、テキストボックスと、提案のリストを含むテキストボックスの下に表示されるスクロールリストです。

これを行うには、1）キーボードが表示されていることを確認し、2）候補リストのサイズを使用可能なスペースに合わせて変更する必要があります。

フォーカスイベントを待って（1）を達成できましたが、（2）はまだ問題があります。私はキーボードの大きさを測定する方法を見つけることができませんでした。窓の大きさや測定しようと思うことに影響を与えないように思われます。

モバイルサファリに表示されているiOSキーボードのサイズをプログラムで決定する方法はありますか？

Answer 1

残念ながら、キーボードの高さを計算する方法はありません。キーボードが表示されても、ウィンドウのプロパティは変更されません。そして、あなたは、デバイスの特定のクラスを追加する必要があるとのために適切なスタイルをこれらのクラスと一緒にあなたのCSSメディアクエリを使用します iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?

：キーボードが表示されている、あなたはこのソリューションを使用することができることを確認するには

デバイスと方向。

誰かがより良いハックを持っているなら、私は本当にそれについて聞いてみたいです。

Answer 2

キーボードのサイズを示すプロパティはありませんが、キーボードが表示される前と後でtop.innerHeightを測定するだけで計算できます。

これはiOSとAndroidの両方に有効です。