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

Screenオブジェクトとは

JavaScriptにおける window.screen プロパティは、現在のウィンドウに関連付けられた screen オブジェクトへの参照を返します。

screen オブジェクトは Screen インターフェースを実装した特殊なオブジェクトで、現在のウィンドウが表示されている画面（ディスプレイ）の情報を調査するためのものです。このオブジェクトには多数のプロパティが用意されており、ユーザーの画面サイズや色深度などの情報を取得できます。

主なプロパティ一覧

• Screen.availTop
  永続的・半永続的なOSのUI要素（タスクバーなど）に割り当てられていない最初のピクセルのY座標を返します。

• Screen.availLeft
  画面の左側から見て、最初に利用可能なピクセルの位置を返します。

• Screen.availHeight
  Windowsのタスクバーなど、OSが常時表示しているUI領域を除いた画面の高さ（ピクセル単位）を返します。

• Screen.availWidth
  ウィンドウが実際に使用できる水平方向の空間の大きさ（ピクセル単位）を返します。

• Screen.colorDepth
  画面の色深度（ビット数）を返します。

• Screen.height
  画面全体の高さ（ピクセル単位）を返します。

• Screen.left
  メイン画面の左端から現在の画面の左端までの距離（ピクセル単位）を返します。

• Screen.orientation
  この画面に関連付けられた ScreenOrientation インスタンスを返します。画面の向き（縦持ち・横持ちなど）の情報を取得できます。

• Screen.pixelDepth
  画面のビット深度を取得します。

• Screen.top
  現在の画面の上端からの距離（ピクセル単位）を返します。

• Screen.width
  画面全体の幅（ピクセル単位）を返します。

使用例

以下のように、screen オブジェクトを使えばユーザー環境の画面情報を簡単に取得できます。

console.log(screen.width);       // 画面の幅
console.log(screen.height);      // 画面の高さ
console.log(screen.availWidth);  // UIを除いた利用可能な幅
console.log(screen.colorDepth);  // 色深度

これらのプロパティを活用することで、レスポンシブ対応やマルチモニター環境でのウィンドウ配置など、画面サイズに依存した処理を実装することが可能になります。