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()を使うようにしてます。
