【JavaScript】visualViewportでスマホのバーチャルキーボードの出現を検知し高さを取得する

やりたいこと

• モバイルで表示されるソフトウェアキーボードの出現を検知したい
• 併せてキーボードの高さも取得したい

しかしどうやらOSによってこの辺りの仕様が異なるらしい。というのもAndroidだとwindow.innerHeightがキーボードの分を除いたウィンドウの高さを返してくれるのでこれを利用できるが、iOSだとキーボードの有無に関わらず同じ値が返ってきてしまう。

解決法

VisualViewport APIを使うことでiOSでもキーボードを除いたウィンドウの高さを取得できるので、これを利用する。

visualViewport.addEventListener(
  "resize",
  ({ target }: { target: VisualViewport }) => {
    const windowHeight = window.innerHeight;
    const visualWindowHeight = target.height;

    const keyboardHeight = windowHeight - visualWindowHeight;
  }
);

1. resizeイベントでキーボードの出現を検知
2. ウィンドウサイズからキーボードを除いたウィンドウの高さ（visualViewport.height）を引く