Screen — Schnittstelle · JavaScript-Referenz

Signatur

interface Screen extends EventTarget

Beschreibung

Das Screen-Interface liefert Informationen über den physischen bzw. logischen Bildschirm, auf dem das aktuelle Browserfenster gerade angezeigt wird. Eine Instanz legt man nicht selbst an. Der Browser stellt genau ein Objekt über window.screen (oder kurz screen) bereit. Einen öffentlichen Konstruktor gibt es nicht: new Screen() wirft einen TypeError.

Die wichtigsten Eigenschaften sind nur lesbar:

width / height: gesamte Bildschirmgröße in CSS-Pixeln
availWidth / availHeight: nutzbare Fläche ohne Taskleiste, Dock o. Ä.
colorDepth / pixelDepth: Farbtiefe in Bit (in der Praxis meist 24)
orientation: ein ScreenOrientation-Objekt mit type, angle und dem Ereignis change
isExtended: gibt an, ob mehrere Bildschirme angeschlossen sind (Window Management API, nur in sicheren Kontexten)

Typische Einsatzzwecke sind Statistik und Analyse (Bildschirmauflösung), das sinnvolle Platzieren und Dimensionieren von Pop-up-Fenstern mit window.open(), Anpassungen an Hoch- oder Querformat sowie Anwendungen für mehrere Bildschirme (Präsentationen, Handelsplattformen). Für responsives Layout sind CSS-Media-Queries bzw. window.matchMedia() und die Fenstergröße (innerWidth/innerHeight) fast immer besser geeignet als die Bildschirmgröße.

Weil Screen von EventTarget erbt, kann es in Chromium-Browsern das Ereignis change auslösen. Das passiert, wenn sich Eigenschaften des Bildschirms ändern, etwa die Auflösung oder die verfügbare Fläche.

Rückgabewert

Typ

Screen

Beschreibung

Über window.screen erhält man das eine Screen-Objekt des aktuellen Fensters. Es wird nicht per Konstruktor erzeugt.

Beispiele

Bildschirmdaten auslesen

const { width, height, availWidth, availHeight, colorDepth } = window.screen;

console.log(`Auflösung: ${width}×${height}`);
console.log(`Nutzbar: ${availWidth}×${availHeight}`);
console.log(`Farbtiefe: ${colorDepth} Bit`);
console.log(`Physische Pixel (Breite): ${Math.round(width * devicePixelRatio)}`);

Auflösung: 1920×1080 Nutzbar: 1920×1040 Farbtiefe: 24 Bit Physische Pixel (Breite): 1920

Pop-up zentriert im nutzbaren Bereich öffnen

const openCentered = (url, w = 600, h = 500) => {
  const left = (screen.availLeft ?? 0) + Math.max(0, (screen.availWidth - w) / 2);
  const top = (screen.availTop ?? 0) + Math.max(0, (screen.availHeight - h) / 2);
  return window.open(url, 'login', `width=${w},height=${h},left=${left},top=${top}`);
};

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

Auf Wechsel zwischen Hoch- und Querformat reagieren

const updateLayout = () => {
  const { type, angle } = screen.orientation;
  document.body.dataset.orientation = type.startsWith('portrait') ? 'hoch' : 'quer';
  console.log(`Ausrichtung: ${type} (${angle}°)`);
};

screen.orientation.addEventListener('change', updateLayout);
updateLayout();

// Später wieder abmelden:
// screen.orientation.removeEventListener('change', updateLayout);

Ausrichtung: landscape-primary (0°)

Mehrere Bildschirme erkennen (Window Management API)

const listScreens = async () => {
  if (!('isExtended' in screen) || !screen.isExtended) {
    console.log('Nur ein Bildschirm verfügbar');
    return;
  }
  // Fragt beim Nutzer die Berechtigung "window-management" an
  const details = await window.getScreenDetails();
  details.screens.forEach((s, i) => {
    console.log(`#${i}: ${s.label} ${s.width}×${s.height}${s.isPrimary ? ' (primär)' : ''}`);
  });
};

listScreens();

#0: Built-in Display 1512×982 (primär) #1: DELL U2720Q 2560×1440

// Wichtig · Fallstricke

CSS-Pixel statt Gerätepixel: width und height werden in CSS-Pixeln angegeben. Auf HiDPI- oder Retina-Displays und bei Browser-Zoom stimmen sie nicht mit der physischen Auflösung überein. Die Gerätepixel ergeben sich erst durch Multiplikation mit window.devicePixelRatio.
Kein Ersatz für die Fenstergröße: Die Bildschirmgröße sagt nichts darüber, wie groß das Browserfenster ist. Für das Layout verwendet man innerWidth/innerHeight, Media-Queries oder ResizeObserver.
Datenschutz und Fingerprinting: Bildschirmwerte eignen sich zum Wiedererkennen von Geräten. Firefox (mit privacy.resistFingerprinting), der Tor Browser und Safari liefern daher unter Umständen gerundete oder gefälschte Werte. colorDepth ist oft fest auf 24 gesetzt.
Nicht standardisiert: availLeft/availTop sind nicht standardisiert, werden aber breit unterstützt. isExtended, getScreenDetails() und das Ereignis change gibt es derzeit nur in Chromium-Browsern und nur in sicheren Kontexten (HTTPS). Außerdem sind sie an die Berechtigung window-management bzw. die Permissions-Policy gebunden.
Veraltete Eigenschaften: Die alten Methoden screen.lockOrientation() und mozOrientation sind veraltet. Stattdessen verwendet man screen.orientation.lock(), das meist nur im Vollbildmodus auf Mobilgeräten funktioniert.
Mehrere Bildschirme: Wird das Fenster auf einen anderen Monitor verschoben, bezieht sich window.screen auf den neuen Bildschirm. Zwischengespeicherte Werte können dadurch veralten.

Siehe auch

Window.screen Window.open() Client SVGRect Serial