Screen
Screen インターフェイスは画面を表し、通常は、現在のウィンドウが描画されている画面であり、 window.screen を使用して取得されます。
なお、ブラウザーはブラウザーのウィンドウの中心がどの画面にあるかを検出することで、報告する現在の画面がどれかを判断します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| Screen インターフェイスの availHeight プロパティは読み取り専用で、画面のウェブコンテンツに利用することができる範囲の高さを、 CSS ピクセル単位で返します。 Screen は Window インターフェイスの Window.screen プロパティから得ることができますので、 availHeight は window.screen.availHeight を使用してアクセスすることができます。 | 1 | 12 | 1 | 1 | 18 | 1 |
| Screen.availWidth プロパティは、ウィンドウで利用可能な水平方向の空間の大きさを CSS ピクセル数で返します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| Screen.colorDepth は読み取り専用プロパティで、画面の色震度を返します。 CSSOM により、互換性の理由から 24 を返す実装もあります。そうでないものについては、ブラウザーの互換性の節を参照してください。 | 1 | 12 | 1 | 1 | 18 | 1 |
| Screen.height は読み取り専用プロパティで、画面の高さを CSS ピクセル数で返します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| 画面のビット深度を返します。 CSSOM により、互換性の理由から 24 を返す実装もあります。そうでないものについては、ブラウザーの互換性の節を参照してください。 | 1 | 12 | 1 | 1 | 18 | 1 |
| Screen.width は読み取り専用のプロパティで、画面の幅を CSS ピクセル単位で返します。 | 1 | 12 | 1 | 1 | 18 | 1 |
- 常にメイン画面を表示します。
- 常にメイン画面を表示します。
- バージョン59以降、このプロパティは必ずしも24を返す必要がなくなりました。
- バージョン59以降、このプロパティは必ずしも24を返す必要がなくなりました。
- バージョン59以降、このプロパティは必ずしも24を返す必要がなくなりました。
- バージョン59以降、このプロパティは必ずしも24を返す必要がなくなりました。
基本構文
if (screen.colorDepth < 8) {
// use low-color version of page
} else {
// use regular, colorful page
}実務での使いどころ
-
Screen の活用
Screen インターフェイスは画面を表し、通常は、現在のウィンドウが描画されている画面であり、 window.screen を使用して取得されます。
注意点
- 古いブラウザでは対応していない場合がある。
実装メモ
- 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。