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

Program

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

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

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

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

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

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

Safari

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

Chrome

このコンソールの入力部分に「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を記述する際の、メディアクエリの指定(ブレイクポイント)を調べる時に使えるかと思います。ただ現状では、ある程度のブレイクポイントの目安がネット上に存在しているのでそれを使えば良いかと思います。

下記の記事ではその様な汎用的に使えるメディアクエリの指定を紹介しています。

2020年5月6日ProgramJava Script,WEB

Posted by KT