iOS8.1のSafariで$(window).height()を使うときの注意点
表示領域を取得するときにお馴染みの
$(window).height();
をiPhoneのSafariで考えなしに使うと痛い目を見るのでメモとして残しておく。
環境
注意すべきところ
iPhoneのSafariが他のブラウザと比べて特徴的なのが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の公式で確認してもらうのが良い。