JavaScriptでスクリーン ・ウインドウ・画面サイズなどを取得しようとすると、 screen.widthや window.innerWidthなど、候補がいくつか出てきませんか？
どれを使用するかでどこのサイズを取得するかが変わったり、デバイスによって結果が変わったりしてややこしいので、少し整理してみようかと思います。
* 以下、Mac,Win,iPhone,Androidの実機で動作を確認した際の注意点などをコメントに記載しています。「スマホ」と表記のあるものはiOS・Androidの両方です。
// 純粋なスクリーンの画面サイズ ( デバイスの向きに関係なく、縦位置のときのwidth, heightを取得 )
screen.width
screen.height
// 有効画面サイズ (PCでもスマホでも screen.height/width と同じ値だった)
screen.availWidth
screen.availHeight
// ウインドウサイズ ( iPhoneのみ 0 になった。PCだとinnerより少し大きい。影など？)
window.outerWidth
window.outerHeight
// ウインドウ内表示領域サイズ ( 以下3つのheightは、スマホだとURLバーの表示の有無で変動します。(*1)を参照してください。 )
window.innerWidth // <- PCだとスクロールバーの横幅を含む
window.innerHeight // <- PCではブックマークバーなどを除いた高さ
$(window).width()
$(window).height()
document.documentElement.clientWidth
document.documentElement.clientHeight
*1 : iOSは3つともURLバーの表示によって数値が増減するが、Android( ver.7 )だとwindow.innerHeightしか数値が変わらず、その他2つは常にURLバーが表示されている場合の数値をとるようです、
下に実機確認用のボタンを作成してみました。ボタンを押すと高さ、横幅がそれぞれalertされます。
*順番は上記の表示順です。
高さ 横幅
ボタンで出力しているスクリプトの内容は以下の通りです。
//高さ
alert('高さ : ' + screen.height +','+ screen.availHeight + ',' + window.outerHeight + ',' + window.innerHeight +','+ $(window).height() + ',' + document.documentElement.clientHeight);
//横幅
alert('幅 : ' + screen.width +','+ screen.availWidth + ',' + window.outerWidth + ',' + window.innerWidth +','+ $(window).width() + ',' + document.documentElement.clientWidth);
