ブラウザのウィンドウサイズ（画面幅と高さ）を確認する裏技

今回はデベロッパーツールのコンソールとJavaScriptを利用して、PCの画面サイズや現在開いているブラウザの幅と高さなどのウィンドウサイズを調べられる裏技を紹介します。

レスポンシブ対応のサイトを作成する際のブレイクポイントとなる値を調べる時や、反対に表示崩れの起きているウィンドウサイズの確認などに使えますので覚えておきましょう。

※今回の検証するブラウザはSafariとChromeです。

コンソールでウィンドウの幅と高さを確認

まずはSafariもしくはChromeでデベロッパーツールを開きます。（Safariの場合「要素の詳細を確認」で開く。Chromeの場合「検証」で開く。）
次にデベロッパーツールのコンソールを開きます。

Safariの場合、下記の様に「コンソール」のタブをクリックすると開きます。

Chromeの場合、下記の様に「Console」のタブをクリックすると開きます。

このコンソールの入力部分に「window.innerWidth」と入力します。
その状態でEnterを押すとコンソールは「ウィンドウビューポートの幅」を数値として返します。これが現在のウィンドウ画面の幅です。また、高さを調べたい場合は、先ほどの「window.innerWidth」を「window.innerHeight」にすれば確認できます。

Safariの場合は下記の様に入力して確認します。（Chromeも同様です。）

※window.innerWidthの「Width」の「W」は大文字です。小文字にすると動作しないです。Heightも同じく。

色んな条件で画面の幅や高さを確認

下記の表は様々な条件の画面の幅と高さを調べる事ができます。

「script」列のテキストをコンソールに入力すると「返す要素」が表示されます。

script（Width）	返す要素（幅）
screen.width	スクリーンの幅を返す
screen.availWidth	スクリーンの有効領域の幅を返す
window.innerWidth	ウィンドウビューポートの幅を返す（スクロールバーを含む）
window.outerWidth	ウィンドウ外観の幅を返す
document.body.clientWidth	ドキュメント全体の幅を返す
document.documentElement.clientWidth	ドキュメントの表示領域を返す

script（Height）	返す要素（高さ）
screen.height	スクリーンの高さを返す
screen.availHeight	スクリーンの有効領域の高さを返す
window.innerHeight	ウィンドウビューポートの高さを返す（スクロールバーを含む）
window.outerHeight	ウィンドウ外観の高さを返す
document.body.clientHeight	ドキュメント全体の高さを返す
document.documentElement.clientHeight	ドキュメントの表示領域を返す