JavaScript ディスプレイの幅/高さ/色深度を取得する(screen)

JavaScriptのディスプレイの幅/高さ/色深度を取得するサンプルです。
screenオブジェクトを使用します。

Screenオブジェクト

screenオブジェクト

window.screen

画面のプロパティを取得できます。
screenオブジェクトは、windowオブジェクトに紐づくオブジェクトです。
以下はMDNサイトのscreenオブジェクトのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/Window/screen

screenオブジェクトの主なプロパティ
プロパティ	説明
width	ディスプレイの幅(ピクセル)
height	ディスプレイの高さ(ピクセル)
availWidth	利用可能なディスプレイの幅 (ピクセル) タスクバー等を除いたもの
availHeight	利用可能なディスプレイの高さ (ピクセル) タスクバー等を除いたもの
colorDepth	ディスプレイの色深度(１ピクセル当たりのビット数) 24ビットであれば約1677万色(フルカラー)※1

(※1) 赤の8ビットと緑の8ビットと青の8ビットを足した24ビット。
8ビットで256色表現できるので赤:256色 ☓ 緑:256色 ☓ 青:256色＝16,777,216となる。

コード

サンプルのコードです。

<script>

console.log(screen.width); // ディスプレイの幅

console.log(screen.height); // ディスプレイの高さ

console.log(screen.availWidth); // 利用可能なディスプレイの幅

console.log(screen.availHeight); // 利用可能なディスプレイの高さ

console.log(screen.colorDepth); // ディスプレイの色深度

</script>