Screen.pixelDepth — Eigenschaft · JavaScript-Referenz

Signatur

Screen.pixelDepth

Beschreibung

screen.pixelDepth ist eine schreibgeschützte Eigenschaft des Screen-Objekts. Sie gibt als ganze Zahl an, wie viele Bit pro Pixel der Bildschirm für die Farbdarstellung nutzt. Den Wert erreicht man über das globale Objekt window.screen.

In allen modernen Browsern entspricht der Wert screen.colorDepth. Beide Eigenschaften gibt es aus historischen Gründen: pixelDepth stammt aus dem alten Netscape und colorDepth aus dem Internet Explorer. Laut CSSOM-Spezifikation müssen beide denselben Wert liefern.

Wofür man den Wert nutzt: für Statistik und Diagnose, etwa um Geräte grob einzuordnen, oder als Hinweis auf Displays mit geringer Farbtiefe (z. B. manche E-Ink-Geräte). Für eine anpassungsfähige Gestaltung sind CSS-Media-Queries wie (color), (dynamic-range: high) oder (color-gamut: p3) meist besser geeignet.

Rückgabewert

Typ

number

Beschreibung

Farbtiefe in Bit pro Pixel als ganze Zahl, typischerweise 24, seltener 30, 32, 16 oder 8.

Beispiele

Farbtiefe auslesen

const depth = window.screen.pixelDepth;
console.log(`Farbtiefe: ${depth} Bit pro Pixel`);

Farbtiefe: 24 Bit pro Pixel

Vergleich mit colorDepth

const { pixelDepth, colorDepth } = screen;
console.log(pixelDepth === colorDepth ? 'identisch' : 'unterschiedlich');

identisch

Geringe Farbtiefe erkennen und Verläufe vereinfachen

const isLowColor = screen.pixelDepth < 16;
if (isLowColor) {
  // Aufwendige Farbverläufe durch flache Farben ersetzen
  document.documentElement.classList.add('low-color');
}
console.log('Wenig Farben:', isLowColor);

Wenig Farben: false

Farbtiefe in Diagnosedaten aufnehmen

const getDisplayInfo = () => ({
  width: screen.width,
  height: screen.height,
  pixelDepth: screen.pixelDepth,
  dpr: window.devicePixelRatio,
  hdr: matchMedia('(dynamic-range: high)').matches
});

console.log(getDisplayInfo());

{ width: 1920, height: 1080, pixelDepth: 24, dpr: 1, hdr: false }

// Wichtig · Fallstricke

Oft ungenau: Viele Browser melden aus Datenschutzgründen immer 24, auch bei HDR- oder 10-Bit-Displays. Firefox tut das etwa mit aktiviertem privacy.resistFingerprinting. Nutze den Wert nicht als verlässliches Merkmal der Hardware.
Fingerprinting: Der Wert gehört zu den Merkmalen, mit denen sich Browser wiedererkennen lassen. Nutze ihn deshalb nur, wenn du ihn wirklich brauchst.
Gleich wie colorDepth: Moderne Browser liefern denselben Wert wie screen.colorDepth. Ältere Unterschiede, etwa im IE (der kein pixelDepth kannte), spielen heute keine Rolle mehr.
Für HDR und großen Farbraum eignen sich die Media-Queries dynamic-range und color-gamut besser.
Die Eigenschaft ist schreibgeschützt. Zuweisungen werden ohne Fehlermeldung ignoriert.
In Node.js gibt es die Eigenschaft nicht, weil dort kein screen-Objekt existiert.

Siehe auch

Screen Screen.width Screen.height Screen.colorDepth Screen.availWidth