Windows 10、モニターサイズ1920 x 1080でそれぞれの数値を検証してみました。
上の数値がフルスクリーンで、下の数値が最大化（スクロールバーやツールバーなどを含む）です。
|
window.innerWidth
x
window.innerHeight |
window.outerWidth
x
window.outerHeight |
$(window).width()
x
$(window).height() |
$(document).width()
x
$(document).height() |
| Firefox 49.0 |
1920 x 1079
1920 x 917 |
1920 x 1080
1936 x 1056 |
1903 x 1079
1903 x 917 |
1903 x 1079
1903 x 917 |
| chrome 53.0.2785.116 m |
1920 x 1080
1920 x 974 |
1904 x 1064
1920 x 1040 |
1903 x 1080
1903 x 974 |
1903 x 1080
1903 x 974 |
| IE 11 |
1920 x 1079
1920 x 985 |
1920 x 1080
1936 x 1056 |
1903 x 1079
1903 x 985 |
1903 x 1079
1903 x 985 |
| IE 10 |
1920 x 1079
1920 x 985 |
1920 x 1080
1936 x 1056 |
1903 x 1079
1903 x 985 |
1920 x 1079
1920 x 985 |
| IE 9 |
1920 x 1079
1920 x 985 |
1920 x 1080
1936 x 1056 |
1903 x 1079
1903 x 985 |
1920 x 1079
1920 x 985 |
| IE 8 |
undefined |
undefined |
1899 x 1075
1899 x 981 |
1920 x 1079
1920 x 985 |
まず高さについてですが、ツールバーやスクロールバーを含めた高さが必要になるケースはあまりないと思われるので、IE 8以上に対応していてIE全バージョンで誤差のない
$(document).height()を使っておけば間違いなさそうです。
IE 8を切るならばwindow.innerHeight、$(window).height()、$(document).height()の中から気分で選べます。
横幅はスクロールバーを含めたい場合とそうでない場合があるのでちょっと厄介です。
スクロールバーを含めるとCSSのメディアクエリやvwと合致しますし、コンテンツ領域との比較でなんかしたいときはスクロールバーを除いた横幅が必要になってきます。
それに加え、IE 8への対応によっても選択が変わってきます。
IEとスクロールバーを条件にまとめてみました。
|
スクロールバーを含める |
スクロールバーを含めない |
| IE 9以上対応 |
window.innerWidth x $(document).height() |
$(window).width() x $(document).height() |
| IE 8以上対応 |
window.innerWidth x $(document).height()
※IE 8のみ$(document).width() |
jQueryでこんな感じで実装してます。
jQuery(function($) {
var winW, conW, conH;
var resizeTimer = false;
$(window).on('load resize orientationchange', function() {
if (resizeTimer !== false)
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
if (typeof (winW = window.innerWidth) === 'undefined')
winW = $(document).width();
conW = $(window).width();
conH = $(document).height();
}, 200);
});
});
winWはスクロールバーを含めた横幅で、conWはコンテンツ領域の横幅。
conHはコンテンツ領域の高さで、スクロールバーを含む数値は取得しない。
window.innerWidthはIE 8が対応していないので、代わりに$(document).width()を使うようにしてます。
