iOSのSafariで画面のサイズを取得する

iOSのSafariでJavaScriptからブラウザの表示領域サイズを取得する際に、プロパティによってはサイズが異なるようだ。

window.innerHeightで取得する場合、上にスクロールをしてアドレスバーが表示されているときと、下にスクロールしてアドレスバーが表示されていないときでは取得できる値が異なる。

document.documentElement.clientHeightで取得する場合はアドレスバーによる影響はなく、常に一定の値が取得できる。

このふたつのプロパティを比較することで、アドレスバーが表示されているかを判定でき、処理を切り替えることができる。

if (window.innerHeight === document.documentElement.clientHeight) {
  // アドレスバーは表示されている
} else {
  // アドレスバーは表示されていない
}