Screen.height — Eigenschaft · JavaScript-Referenz

Signatur

Screen.height

Beschreibung

screen.height liefert die vollständige Höhe des Bildschirms, auf dem das aktuelle Browserfenster angezeigt wird, in CSS-Pixeln. Du erreichst die Eigenschaft über das globale Objekt window.screen, meist kurz als screen.height geschrieben.

Der Wert umfasst den gesamten Bildschirm, also auch Bereiche, die Taskleiste, Dock oder Menüleiste des Betriebssystems belegen. Brauchst du den Platz, der für Fenster tatsächlich zur Verfügung steht, verwende screen.availHeight. Für die Höhe des sichtbaren Bereichs im Browser (Viewport) ist window.innerHeight die richtige Eigenschaft.

Typische Anwendungsfälle:

Popup-Fenster mit window.open() auf dem Bildschirm mittig platzieren
Statistiken über die Bildschirmauflösung sammeln, z. B. für Analysen
Die physische Auflösung in Gerätepixeln abschätzen, zusammen mit window.devicePixelRatio

Für responsives Layout ist screen.height in der Regel nicht geeignet. Dafür sind CSS-Media-Queries oder window.matchMedia() gedacht, weil sie sich auf den Viewport beziehen.

Rückgabewert

Typ

number

Beschreibung

Eine ganze Zahl: die Bildschirmhöhe in CSS-Pixeln. Der Wert ist schreibgeschützt; wenn du ihm etwas zuweist, wird das ohne Fehlermeldung ignoriert.

Beispiele

Bildschirmgröße auslesen

const { width, height, availHeight } = screen;
console.log(`Bildschirm: ${width} × ${height} CSS-Pixel`);
console.log(`Von Taskleiste o. Ä. belegt: ${height - availHeight} px`);

Bildschirm: 1920 × 1080 CSS-Pixel Von Taskleiste o. Ä. belegt: 40 px

Popup vertikal und horizontal zentrieren

const openCentered = (url, w = 600, h = 400) => {
  const top = Math.max(0, Math.round((screen.height - h) / 2));
  const left = Math.max(0, Math.round((screen.width - w) / 2));
  return window.open(url, 'popup', `width=${w},height=${h},top=${top},left=${left}`);
};

document.querySelector('#login')
  .addEventListener('click', () => openCentered('/oauth/login'));

Physische Auflösung in Gerätepixeln abschätzen

const physicalHeight = Math.round(screen.height * window.devicePixelRatio);
console.log(`CSS-Höhe: ${screen.height}, Gerätepixel: ${physicalHeight}`);

CSS-Höhe: 1080, Gerätepixel: 2160

Vergleich: Bildschirm, verfügbarer Bereich, Viewport

console.table({
  'screen.height': screen.height,
  'screen.availHeight': screen.availHeight,
  'window.outerHeight': window.outerHeight,
  'window.innerHeight': window.innerHeight
});

screen.height: 1080, screen.availHeight: 1040, window.outerHeight: 1040, window.innerHeight: 937

// Wichtig · Fallstricke

CSS-Pixel, keine Gerätepixel: Auf Displays mit hoher Pixeldichte (Retina) ist der Wert kleiner als die physische Auflösung. Multipliziere ihn bei Bedarf mit window.devicePixelRatio.
Zoom: In manchen Browsern, etwa Firefox, verändert der Seitenzoom den gemeldeten Wert.
Mehrere Monitore: Der Wert bezieht sich auf den Bildschirm, auf dem das Fenster gerade liegt. Schiebst du das Fenster auf einen anderen Monitor, kann er sich ändern. Wenn du alle Bildschirme ermitteln willst, bietet die Window Management API mit window.getScreenDetails() mehr, wird aber derzeit nur von Chromium-Browsern unterstützt.
Ausrichtung: Auf Mobilgeräten tauschen height und width je nach Browser beim Drehen die Werte, oder sie bleiben gleich. Verlass dich deshalb nicht darauf und frag stattdessen screen.orientation ab.
Datenschutz: Die Bildschirmauflösung wird zum Browser-Fingerprinting genutzt. Deshalb melden datenschutzorientierte Browser (z. B. Tor Browser, Firefox mit resistFingerprinting) absichtlich gerundete oder gefälschte Werte, etwa die Größe des Viewports.
Kompatibilität: Die Eigenschaft wird von allen Browsern unterstützt. In Node.js gibt es sie nicht, weil dort kein window.screen existiert.

Siehe auch

Screen Screen.width Screen.availHeight Window.innerHeight Window.outerHeight Window.devicePixelRatio Screen.orientation