閲覧者のディスプレイ(画面)サイズをJavaScriptで得る方法

JavaScriptでは、閲覧者が利用している環境のディスプレイ(画面)サイズを知ることもできます。
以下のボックスには、あなたのディスプレイの大きさが表示されているはずです。

閲覧者(JavaScriptが実行されている環境)のディスプレイサイズを知るには、screenオブジェクトのwidthプロパティやheightプロパティを参照するだけです。
例えば、以下のようなJavaScriptソースで得られます。

var sw = window.screen.width; // 画面の横幅
var sh = window.screen.height; // 画面の高さ

上記のJavaScriptソースで、変数swにはディスプレイの横幅が数値で格納され、変数shには高さが数値で格納されます。
さらに以下のように書けば、先ほどの実行例のように画面サイズを出力できます。

document.write("あなたの画面サイズは、 " + sw + "×" + sh + " です。");

とても簡単です。
このように閲覧者のディスプレイサイズを把握できれば、例えばサブウインドウを開きたいときに、どれくらいの大きさのウインドウを生成するかの参考にしたりできます。実際の画面サイズを超えるサブウインドウを開いてしまうのを避けたり、小さいサブウインドウを画面の中央に寄せるために計算する際に活用できるでしょう。

閲覧者のウインドウ全体(外側)サイズをJavaScriptで得る方法

画面サイズではなく、ブラウザのウインドウサイズを知りたい場合もあります。
以下のボックスには、あなたがお使いのブラウザのウインドウサイズが表示されているはずです。ここでのウインドウサイズは、ウインドウのタイトル領域やステータスバーや各種ツールバーなどをすべて含んだ大きさです。

PCの場合はブラウザのウインドウサイズです。モバイル端末の場合は、OSが表示する領域を除いたブラウザアプリのサイズですね。
これらの値は、windowオブジェクトのouterWidthプロパティやouterHeightプロパティを参照すれば得られます。
例えば、以下のようなJavaScriptソースを記述します。

var ow = window.outerWidth; // ウインドウ全体の横幅
var oh = window.outerHeight; // ウインドウ全体の高さ

上記のJavaScriptソースで、変数owにはブラウザウインドウの横幅が数値で格納され、変数ohには高さが数値で格納されます。

なお、outerWidthプロパティやouterHeightプロパティは読み取り専用なので、これらの値に数値を代入することでブラウザのウインドウサイズを変化させたりはできません。(^_^;)
ちなみにJavaScriptでウインドウサイズを変更するには window.resizeTo (絶対的に変更)や window.resizeBy (相対的に変更)が使えますが、ウインドウサイズを勝手に変更するのはユーザが迷惑するので避けた方が良いでしょうね。

閲覧者のウインドウ内側(Viewport)サイズをJavaScriptで得る方法

画面サイズでもなく、ブラウザのウインドウサイズでもなく、実際に表示(描画)が可能な領域の大きさが知りたい場合もあります。というか、「画面サイズが知りたい」と考えたたいていの場合で、必要なのはこの値な気がします。(^_^;)
以下のボックスには、あなたがお使いのブラウザで、ウインドウ内部の実際にウェブページを描画可能な領域の大きさが表示されているはずです。ここでのサイズには、ツールバーなどのサイズは含みません。しかし、スクロールバーは含みます。

実際にウェブページの描画領域として使用可能なサイズが得られます。
これらの値は、windowオブジェクトのinnerWidthプロパティやinnerHeightプロパティを参照すれば得られます。
例えば、以下のようなJavaScriptソースを記述します。

var iw = window.innerWidth; // ウインドウ内側の横幅
var ih = window.innerHeight; // ウインドウ内側高さ

上記のJavaScriptソースで、変数iwには描画領域(Viewport)の横幅が数値で格納され、変数ihには高さが数値で格納されます。
これらの値を使って、特定のコンテンツの表示サイズを決定したりするのに使うケースが多い気がします。描画に必要となる面積が足りているかどうかを事前に調べたりするのに活用できそうです。

先程のウインドウ全体のサイズ(変数oh)から、ウインドウ内部のサイズ(変数ih)を引き算すれば、ブラウザに表示されているツールバーなどのサイズも計算できますね。例えば以下のような感じで。

なお、ツールバーやタイトルバーだけでなく、ウインドウ枠の太さなども含まれますが。

フレーム内部で読み込まれているページからウインドウサイズを知りたい場合

上記の window.innerWidth では、そのページがフレーム内部で読み込まれている場合には、フレームのサイズを返します。
それでは困る場合には、window.parent や window.top を使って以下のように記述できます。

var pw = window.parent.innerWidth; // 親フレームの横幅
var tw = window.top.innerWidth; // 最上位フレームの横幅

フレームが2階層しかない場合は parent も top も同じですが、3階層以上ある場合には異なります。
まあ、フレームを3階層以上にするケースは滅多になさそうな気がしますが。とにかく最も外側のフレーム(＝つまりブラウザのウインドウそのもの)のサイズを知りたい場合は、window.top を参照する方が良さそうですね。

ちなみに、フレーム内部で表示されていない場合は、window も window.parent も window.top も全部同じです。
例えば以下のように。

フレームの内部で表示される可能性がある場合には、とりあえず window.top を使っておけば良いかも知れません。
まあ、さすがにフレームを入れ子にして使うケースはあまりなさそうだとは思いますが。(^_^;)

というわけで、JavaScriptを使って画面やウインドウの幅・高さを得る方法でした。
ちなみに、画面やウインドウではなく「特定の要素のサイズ」を知りたい場合は、clientWidth とか clientHeight を使うと良いです。

(更新日：2017年06月03日)