JavaScript アドバンス

JavaScript Window Screen

1. Window Screen オブジェクト

window.screen オブジェクトは、ユーザーの画面に関する情報を保持しています。

この window.screen オブジェクトは、window プレフィックスを省略して screen だけで記述することも可能です。

主なプロパティは以下の通りです：

  • screen.width
  • screen.height
  • screen.availWidth
  • screen.availHeight
  • screen.colorDepth
  • screen.pixelDepth

2. Window Screen Width

screen.width プロパティは、訪問者の画面の幅をピクセル（pixels）単位で返します。

2.1 コード例

画面の幅をピクセル単位で表示します。

document.getElementById("demo").innerHTML = 
"画面の幅: " + screen.width;

実行結果:

画面の幅: 1280

3. Window Screen Height

screen.height プロパティは、訪問者の画面の高さをピクセル（pixels）単位で返します。

3.1 コード例

画面の高さをピクセル単位で表示します。

document.getElementById("demo").innerHTML = 
"画面の高さ: " + screen.height;

実行結果:

画面の高さ: 800

4. Window Screen Available Width

screen.availWidth プロパティは、Windowsのタスクバーなどのインターフェース機能を除いた、訪問者の画面の有効な幅をピクセル単位で返します。

4.1 コード例

画面の有効な幅をピクセル単位で表示します。

document.getElementById("demo").innerHTML = 
"有効な画面の幅: " + screen.availWidth;

実行結果:

有効な画面の幅: 1280

5. Window Screen Available Height

screen.availHeight プロパティは、Windowsのタスクバーなどのインターフェース機能を除いた、訪問者の画面の有効な高さをピクセル単位で返します。

5.1 コード例

画面の有効な高さをピクセル単位で表示します。

document.getElementById("demo").innerHTML = 
"有効な画面の高さ: " + screen.availHeight;

実行結果:

有効な画面の高さ: 725

6. Window Screen Color Depth

screen.colorDepth プロパティは、1つの色を表示するために使用されるビット（bits）数を返します。

現代のコンピュータはすべて、カラー解像度に24ビットまたは32ビットのハードウェアを使用しています。

  • 24 bits = 16,777,216通りの異なる「トゥルーカラー (True Colors)」
  • 32 bits = 4,294,967,296通りの異なる「ディープカラー (Deep Colors)」

古いコンピュータでは16ビット（65,536通りのハイカラー解像度）、非常に古いコンピュータや古い携帯電話では8ビット（256通りのVGAカラー）が使用されていました。

6.1 コード例

画面のカラー深度をビット単位で表示します。

document.getElementById("demo").innerHTML = 
"画面のカラー深度: " + screen.colorDepth;

実行結果:

画面のカラー深度: 24

HTMLで使用される #rrggbb (RGB) 値は、「トゥルーカラー」（16,777,216色）を表しています。

7. Window Screen Pixel Depth

screen.pixelDepth プロパティは、画面のピクセル深度を返します。

7.1 コード例

画面のピクセル深度をビット単位で表示します。

document.getElementById("demo").innerHTML = 
"画面のピクセル深度: " + screen.pixelDepth;

実行結果:

画面のピクセル深度: 24

※現代のコンピュータにおいては、カラー深度（Color Depth）とピクセル深度（Pixel Depth）は等しい値になります。