JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで画面解像度を検出する方法を解説！window.screenの使い方

はじめに

Webアプリケーションを開発する際、ユーザーの画面解像度（スクリーンサイズ）を検出したいケースは多くあります。例えば、レスポンシブデザインの調整や、表示領域に応じたコンテンツの出し分けなどが挙げられます。

JavaScriptでは、window.screenオブジェクトを使うことで、簡単に画面の解像度情報を取得できます。この記事では、その具体的な方法をサンプルコードとともにわかりやすく解説します。

window.screenオブジェクトとは

window.screenは、ユーザーが使用しているディスプレイ（画面）に関する情報を保持しているオブジェクトです。このオブジェクトのプロパティを参照することで、画面の幅や高さなどの情報を取得できます。

画面の幅を取得する：availWidth

利用可能な画面の幅（タスクバーなどを除いた有効な幅）を取得するには、以下のように記述します。

window.screen.availWidth

画面の高さを取得する：availHeight

同様に、利用可能な画面の高さを取得するには、次のコードを使用します。

window.screen.availHeight

サンプルコード：画面解像度を検出する

それでは、実際に画面解像度を検出する完全なHTMLコードを見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画面解像度の検出</title>
</head>
<body>
<script>
    console.log("Available Width=" + window.screen.availWidth);
    console.log("Available Height=" + window.screen.availHeight);
</script>
</body>
</html>

このコードでは、ページ読み込み時にブラウザの開発者ツール（Console）へ、利用可能な画面の幅と高さが出力されます。

実行方法

上記のプログラムを実行する手順は以下の通りです。

  1. 上記のコードを「index.html」などの名前でファイルとして保存します。
  2. VS Codeエディタで該当ファイルを開きます。
  3. ファイルを右クリックし、「Open with Live Server」を選択してブラウザで起動します。

Live Server拡張機能がインストールされていない場合は、保存したHTMLファイルを直接ダブルクリックしてブラウザで開いても同様に確認できます。

実行結果

プログラムを実行すると、開発者ツールのコンソールに次のような出力が表示されます。

  • Available Width=1920（利用可能な画面の幅）
  • Available Height=1040（利用可能な画面の高さ）

※実際の数値は、ご使用のモニターの解像度やOSの設定によって異なります。Windowsの場合、タスクバーの高さ分だけ縦の値が小さく表示される点に注意してください。

availWidth / availHeight と width / height の違い

window.screenには、似たようなプロパティが複数存在します。それぞれの違いを理解しておきましょう。

プロパティ意味
screen.width画面全体の幅（ピクセル）
screen.height画面全体の高さ（ピクセル）
screen.availWidthタスクバー等を除いた利用可能な幅
screen.availHeightタスクバー等を除いた利用可能な高さ

純粋な物理解像度を知りたい場合は screen.width / screen.height を、実際にアプリケーションが使用できる領域を知りたい場合は availWidth / availHeight を使うのが適切です。

補足：Retina・高DPIディスプレイへの対応

MacのRetinaディスプレイなど高精細な画面では、CSSピクセルとデバイスの物理ピクセルが一致しない場合があります。その場合は window.devicePixelRatio を併用すると、より正確な描画制御が可能になります。

console.log("Device Pixel Ratio=" + window.devicePixelRatio);

まとめ

JavaScriptで画面解像度を検出するには、window.screenオブジェクトのavailWidthとavailHeightプロパティを使用します。用途に応じてwidthやheight、さらに高DPI対応のためのdevicePixelRatioも活用することで、さまざまな環境に柔軟に対応したWebアプリケーションを構築できます。

  1. JavaScriptでブラウザのオンライン・オフライン状態を検出する方法

    Webアプリケーションを開発していると、ユーザーが現在インターネットに接続しているかどうかを判定したい場面があります。JavaScriptでは、navigator.onLineプロパティを使うことで、ブラウザがオンライン状態かオフライン状態かを簡単に検出できます。 navigator.onLine プロパティとは navigator.onLineは、ブラウザの接続状態を真偽値（boolean）で返すプロパティです。 インターネットに接続している場合：true オフラインの場合：false このプロパティをボタンのクリックイベントなどと組み合わせることで、ユーザーの接続状況に応じた処理を実装

  2. JavaScriptでinnerHTMLを設定する方法をわかりやすく解説

    JavaScriptでHTML要素の内容を動的に書き換えたい場合に便利なのが、innerHTMLプロパティです。innerHTMLを使えば、指定した要素の中にHTML文字列をそのまま挿入・置き換えることができます。本記事では、innerHTMLを設定する正しい構文と、実際に動作するサンプルコードを初心者向けに解説します。 innerHTMLを設定する正しい構文 innerHTMLを設定する際の正しい構文は以下のとおりです。 document.getElementById(yourIdName).innerHTML=yourValue; この構文では、まずgetElementById()メソッド