Screen.availHeight — Eigenschaft · JavaScript-Referenz

Signatur

Screen.availHeight

Beschreibung

Die schreibgeschützte Eigenschaft availHeight des Screen-Objekts (erreichbar über window.screen) gibt die vertikale Größe des Bildschirmbereichs zurück, den Anwendungsfenster tatsächlich belegen können. Anders als screen.height werden dabei Bereiche abgezogen, die das Betriebssystem dauerhaft beansprucht, etwa die Windows-Taskleiste, die macOS-Menüleiste oder das Dock.

Der Wert wird in CSS-Pixeln angegeben, nicht in physischen Gerätepixeln. Auf hochauflösenden Displays (z. B. mit devicePixelRatio 2) ist der Wert also kleiner als die physische Auflösung. Auch der Browser-Zoom kann den Wert je nach Browser beeinflussen.

Typische Einsatzgebiete sind die Größen- und Positionsberechnung von Pop-up-Fenstern mit window.open(), die maximale Fenstergröße bei window.resizeTo() sowie statistische Auswertungen. Für responsives Layout innerhalb der Seite ist availHeight dagegen ungeeignet: Nimm dafür window.innerHeight, CSS-Media-Queries oder window.visualViewport.

Rückgabewert

Typ

number

Beschreibung

Ganzzahlige Höhe des verfügbaren Bildschirmbereichs in CSS-Pixeln. Sie ist immer kleiner oder gleich screen.height.

Beispiele

Verfügbare Höhe mit der Gesamthöhe vergleichen

const { height, availHeight } = window.screen;
const reserviert = height - availHeight;

console.log(`Bildschirmhöhe: ${height}px`);
console.log(`Verfügbar: ${availHeight}px`);
console.log(`Von Systemleisten belegt: ${reserviert}px`);

Bildschirmhöhe: 1080px Verfügbar: 1040px Von Systemleisten belegt: 40px

Pop-up vertikal zentriert und passend groß öffnen

const openCenteredPopup = (url, width = 600, height = 700) => {
  const { availWidth, availHeight } = window.screen;
  // Höhe auf den verfügbaren Platz begrenzen
  const h = Math.min(height, availHeight - 40);
  const w = Math.min(width, availWidth - 40);
  const left = Math.round((availWidth - w) / 2);
  const top = Math.round((availHeight - h) / 2);
  return window.open(url, 'login', `width=${w},height=${h},left=${left},top=${top}`);
};

openCenteredPopup('https://example.com/login');

Physische Pixel näherungsweise berechnen

const availPhysisch = Math.round(screen.availHeight * window.devicePixelRatio);
console.log(`CSS-Pixel: ${screen.availHeight}, physische Pixel: ${availPhysisch}`);

CSS-Pixel: 875, physische Pixel: 1750

// Wichtig · Fallstricke

Nicht für Layout verwenden: availHeight beschreibt den Bildschirm, nicht das Browserfenster. Für die sichtbare Seitenhöhe window.innerHeight oder visualViewport.height nutzen.
Mehrere Monitore: Der Wert bezieht sich auf den Bildschirm, auf dem sich das Fenster gerade befindet. Wird das Fenster verschoben, kann er sich ändern. Für Multi-Monitor-Szenarien gibt es die Window Management API (window.getScreenDetails(), derzeit nur in Chromium-Browsern).
Mobilgeräte: Hier entspricht availHeight oft ganz oder fast screen.height. Status- und Navigationsleisten werden je nach Browser uneinheitlich abgezogen.
Datenschutz: Bildschirmwerte gehören zum Browser-Fingerprinting. Firefox mit privacy.resistFingerprinting und der Tor-Browser liefern deshalb absichtlich verfälschte Werte, etwa die Fenstergröße.
Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird ohne Fehlermeldung ignoriert.
Wird in allen gängigen Browsern seit langer Zeit unterstützt.

Siehe auch

Screen Screen.availWidth Screen.height Window.innerHeight Window.devicePixelRatio Window.open()