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

JavaScriptのwindow.screenオブジェクトの主なプロパティ一覧と使い方

JavaScriptのwindow.screenオブジェクトは、ユーザーの画面（ディスプレイ）に関する情報を取得するために使用されます。このオブジェクトを利用することで、画面のサイズや利用可能な領域などをプログラムから参照できます。

window.screenオブジェクトの主なプロパティ

window.screenオブジェクトには、以下のようなプロパティが用意されています。

  • screen.width — 画面全体の幅（ピクセル数）
  • screen.height — 画面全体の高さ（ピクセル数）
  • screen.availWidth — タスクバーなどのシステムUIを除いた、実際に利用可能な画面の幅
  • screen.availHeight — タスクバーなどのシステムUIを除いた、実際に利用可能な画面の高さ
  • screen.colorDepth — 画面の色深度（1ピクセルあたりのビット数）
  • screen.pixelDepth — 画面のピクセル深度（1ピクセルあたりのビット数）

なお、widthやheightはOSのタスクバーなども含んだ画面全体のサイズを返すのに対し、availWidthやavailHeightはブラウザウィンドウが実際に表示できる領域のサイズを返すという違いがあります。

サンプルコード

以下のコードを実行すると、window.screenオブジェクトを使って画面情報を取得する方法を確認できます。

<!DOCTYPE html>
<html>
<body>
  <script>
    document.write("画面の幅: " + screen.width);
    document.write("<br>画面の高さ: " + screen.height);

    document.write("<br>利用可能な画面の幅: " + screen.availWidth);
    document.write("<br>利用可能な画面の高さ: " + screen.availHeight);
  </script>
</body>
</html>

実行結果の例

画面の幅: 1920
画面の高さ: 1080
利用可能な画面の幅: 1920
利用可能な画面の高さ: 1040

このように、window.screenオブジェクトのプロパティを活用すれば、ユーザーの画面環境に応じたレスポンシブな処理や表示の最適化を行うことができます。

  1. JavaScriptのScreenオブジェクトとは？画面情報を取得する主なプロパティを解説

    ScreenオブジェクトとはJavaScriptにおける window.screen プロパティは、現在のウィンドウに関連付けられた screen オブジェクトへの参照を返します。screen オブジェクトは Screen インターフェースを実装した特殊なオブジェクトで、現在のウィンドウが表示されている画面（ディスプレイ）の情報を調査するためのものです。このオブジェクトには多数のプロパティが用意されており、ユーザーの画面サイズや色深度などの情報を取得できます。主なプロパティ一覧Screen.availTop永続的・半永続的なOSのUI要素（タスクバーなど）に割り当てられていない最初のピクセルの

  2. JavaScriptのwindow.locationとは？Locationオブジェクトの主なプロパティを徹底解説

    window.locationとは Window.locationは読み取り専用のプロパティで、現在表示しているドキュメントのURL情報を保持するLocationオブジェクトを返します。 Locationインターフェースは、そのオブジェクトがリンクされている場所（URL）を表します。locationオブジェクトには、以下のような便利なプロパティが用意されています。 locationオブジェクトの主なプロパティ一覧 location.href URL全体を含む文字列（DOMString）です。この値を変更すると、関連付けられたドキュメントが新しいページへ遷移します。また、関連ドキュメントとは