背景 🏃♂️
業務で“実際に見えている”ページ領域（今回は高さ）を算出する必要があり、調査すると以下の選択肢があったのでここに整理します！
モバイルでも使用する想定です。
- window.innerHeight
- window.outerHeight
- window.visualViewport.height
- document.documentElement.clientHeight
結論 💡
今回の用途としてはwindow.visualViewport.heightが最適だなと判断しました。
理由
- 画面を拡大縮小（macで言うcommand + ）すると値も連動する
- 画面をズームイン、ズームアウトすると値も連動する
- 仮想（画面）キーボードが表示されると値も連動する（モバイル）
- 動的ツールバーの高さは含まない
最終的な比較表は以下です
用語説明
ビューポートとは
ウィンドウ (または、文書が全画面モードで表示されている場合は画面) の中で現在見えている部分のこと
視覚的ビューポートとは
ビューポートの中で現在表示されている部分
動的ツールバーとは
モバイルでページ初期表示時に表示される画面下部のバー
https://web.dev/blog/viewport-units?hl=ja
仮想（画面）キーボードとは
モバイルで入力中に表示されるキーボードのこと
次にそれぞれの算出方法の説明や特徴について解説します
window.innerHeight
- 今表示されている視覚的ビューポートの高さ（px）
- 水平スクロールバーがあればその高さを含む
- 画面を拡大縮小（macで言うcommand + ）すると値も連動する
- 画面をズームイン、ズームアウトすると値は連動しない
- 仮想キーボードが表示されると、
innerHeightは連動しない（モバイル） - 動的ツールバーの高さは含まない
「仮想キーボードが表示されると、innerHeightは連動しない」ことについてつぶやかれていたツイートが以下です。
window.outerHeight
- ブラウザーウィンドウ全体の高さ（px）
- 以下を含む
- サイドバー
- ウィンドウの操作部分
- ウィンドウをリサイズする境界やハンドル
window.visualViewport.height
- 今表示されている視覚的ビューポートの高さ
- 画面を拡大縮小（macで言うcommand + ）すると値も連動する
- 画面をズームイン、ズームアウトすると値も連動する
- 仮想（画面）キーボードが表示されると値も連動する（モバイル）
- 動的ツールバーの高さは含まない
document.documentElement.clientHeight
- 今表示されている視覚的ビューポートの高さ
- 画面を拡大縮小（macで言うcommand + ）すると値も連動する
- 画面をズームイン、ズームアウトすると値は連動しない
- 仮想キーボードが表示されると、値は連動しない（モバイル）
- スクロールバーを除く
- 動的ツールバーの高さを含む
仮想キーボード表示によって値に違いが出るか検証
Webインスペクタを使って検証しました。（iPhoneのSafari,Chrome）
以下をスマホで表示している状態でWebインスペクタを使ってjsを実行します。
これにより、キーボードを除いた見えているページ部分の高さのみが算出されるかを見ます。
以下のように、window.visualViewport.heightを使うと確かに今見えている部分を正確に算出できていることが分かりました。（document.documentElement.clientHeightだとwindow.innerWidthと同様の結果になりました）
キーボード表示；547px
キーボード非表示；320.5px
Chromeでも同様の結果になりました。
参考
- https://ja.javascript.info/size-and-scroll-window
- https://developer.mozilla.org/ja/docs/Web/API/Window/outerHeight
- https://www.javadrive.jp/javascript/webpage/index6.html
- https://web.dev/blog/viewport-units
- https://zenn.dev/catnose99/scraps/e9b1de4ddf2181
- https://developer.mozilla.org/ja/docs/Web/API/Window/innerHeight
- https://developer.mozilla.org/ja/docs/Web/API/VisualViewport/height
- https://developer.mozilla.org/ja/docs/Web/API/Element/clientHeight
- https://qiita.com/unsoluble_sugar/items/2a3d06631a6b8259dc44
- https://developer.chrome.com/blog/debugging-chrome-on-ios?hl=ja