JavaScriptのscreen.pixelDepthとは？オフスクリーンの色深度を取得する方法を解説
screen.pixelDepth は、モニタのオフスクリーン領域が使用している色深度（1ピクセルあたりのビット数）を返すプロパティです。
環境によっては取得できない場合もあるため、チェックしながら利用します。
pixelDepthプロパティとは？
色深度は、モニタが表現できる色数をビット数で表したものです。
screen.pixelDepth は次のような値を返します。
| 色数 | 返される値（ビット） |
|---|---|
| 白黒 | 1 |
| 16色 | 4 |
| 256色 | 8 |
| 65,536色（HighColor） | 16 |
| 1,677万色（TrueColor） | 32 |
現在のモニタはほとんどが 24bit または 32bit（TrueColor）です。
使用例：pixelDepthを取得して表示する
以下は、ページ読み込み時に pixelDepth を取得し、フォームに表示するサンプルです。
<head>
<title>JavaScript Sample</title>
<script>
function scrDepth() {
var pxElem = document.getElementById(“pixel”);
// pixelDepth が取得できない場合
if (screen.pixelDepth === undefined) {
pxElem.value = “参照不可”;
return;
}
// pixelDepth を表示
pxElem.value = screen.pixelDepth;
}
</script>
</head>
<body onload=”scrDepth()”>
<p><b>モニタのオフスクリーン色深度が表示されます。</b></p>
<form>
<p>オフスクリーンの色深度は <input type=”text” id=”pixel” size=”8″> ビットです。</p>
</form>
</body>
</html>
→ pixelDepth が取得できないブラウザにも対応した安全な書き方になっています。
pixelDepth と colorDepth の違い
- colorDepth：画面の色深度（一般的にこちらを使う）
- pixelDepth：オフスクリーンの色深度（ブラウザによっては取得不可）
多くの環境では両者は同じ値を返しますが、pixelDepth は非対応ブラウザもあるため注意が必要です。
まとめ
screen.pixelDepthはオフスクリーンの色深度を返す- 取得できないブラウザがあるためチェックが必要
- 一般的には colorDepth の方が広く利用される
- 環境調査やデバッグに役立つプロパティ
