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

Programming

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

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

この記事を書いた人
KEITO

AI × IT × WEB3|関東在住。本職はディレクター 。AIを活用してビジネス開拓。仕事の依頼はTwitterからお願いします。YouTube、Twitter、Instagramもお願い致します。

Programming
この記事を共有する
スポンサーリンク
スポンサーリンク
KT LIFE
スポンサーリンク

暗号資産投資するなら以下

Bybit

国内人気No.1!屈強なサーバー/信頼性抜群!トレーダー御用達の取引所。

通貨数338種以上
レバレッジ最大100倍
現物取引手数料Maker:0%〜0.1%
Taker:0.02%〜0.1%
先物取引手数料Maker:0%〜0.01%
Taker:0.03%〜0.06%
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり・JPY利用可
特典下記から登録で初回ボーナスあり
登録リンクBybitへの登録は こちら
招待コード22295
レビュー記事レビュー記事は こちら
BigBoss&CRYPTOS

最大レバレッジ1111倍・日本円換金ルート

通貨数BigBoss:15種以上
CRYPTOS:15種以上
レバレッジ最大1111倍
スポット手数料Maker:0.02%〜0.18%
Taker:0.05〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設少し敷居が高い
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクBigBossへの登録は こちら
招待コード6690951
レビュー記事レビュー記事は こちら
Nexo

高APYでのステーキング&レンディング

通貨数60種以上
レバレッジ
スポット手数料Maker:0.04%〜0.20%
Taker:0.03%〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクNexoへの登録は こちら
招待コード
レビュー記事レビュー記事は こちら

他おすすめ取引所はこちら

タイトルとURLをコピーしました