今回はデベロッパーツールのコンソールと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 | ドキュメントの表示領域を返す |
スクリーンとは…PCのモニターの画面の幅と高さ
ウィンドウビューポートとは…ブラウザでページが表示される部分。（デベロッパーツールやURLバーを含まない）
ウィンドウ外観とは…ブラウザで表示されている全ての部分。（デベロッパーツールやURLバーを含む）
ドキュメントとは…ページのコンテンツのこと。
以上が「ブラウザのウィンドウサイズ（画面幅と高さ）を確認する裏技」でした。
ブログ運営やサイト制作でCSSを記述する際の、メディアクエリの指定（ブレイクポイント）を調べる時に使えるかと思います。ただ現状では、ある程度のブレイクポイントの目安がネット上に存在しているのでそれを使えば良いかと思います。
下記の記事ではその様な汎用的に使えるメディアクエリの指定を紹介しています。
