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

1. JavaScript
2023/07/01

やりたいこと

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

しかしどうやら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;
  }
);

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