iOS8.1のSafariで$(window).height()を使うときの注意点

表示領域を取得するときにお馴染みの

$(window).height();

iPhoneSafariで考えなしに使うと痛い目を見るのでメモとして残しておく。

環境

注意すべきところ

iPhoneSafariが他のブラウザと比べて特徴的なのがURLバー(を含む上下のバー)がスクロールで小さくなったりする部分。これが本当にやっかいな挙動をする。

縦(portrait)表示の時は良いとして、問題なのは横(landscape)表示のとき。
URLバー(を含む上下のバー)は、縦から横に回転させたとき隠れ、スクロールすると表示される。 このURLバー(を含む上下のバー)が表示されているか否かで、表示領域の高さは変わるはずなのに、$(window).height()は同じ値を返す。

iPhone 5sで実行した時返す値

取得方法 URLバーが表示 URLバーが非表示
$(window).height() 320 320
window.innerHeight 232 320

上記の表は

<meta name='viewport' content='width=device-width,initial-scale=1.0'>

を記述した場合のもの。

表の中で挙げた

window.innerHeight

を用いると、正しい(?)値が取得できる。
ただし、

$(window).height()
window.innerHeight

の2つは使用目的がそれぞれ異なるため、取得できる値が必ずしも同じとは限らない(例:横スクロールバーが表示されている時、この高さを含むか否か)ので注意が必要である。詳しくはjQueryの公式で確認してもらうのが良い。