Signatur
Beschreibung
Die Eigenschaft window.screen gibt eine Referenz auf ein Screen-Objekt zurück. Dieses beschreibt den physischen bzw. logischen Bildschirm, auf dem das Browserfenster gerade angezeigt wird, etwa seine Breite (screen.width), Höhe (screen.height), die verfügbare Fläche ohne Taskleiste oder Dock (screen.availWidth, screen.availHeight) sowie die Farbtiefe (screen.colorDepth).
Da window das globale Objekt ist, kann man auch einfach screen schreiben. Die Werte werden in CSS-Pixeln angegeben, nicht in Gerätepixeln. Die tatsächliche physische Auflösung ergibt sich erst zusammen mit window.devicePixelRatio.
Typische Anwendungsfälle sind das Positionieren und Dimensionieren von Popup-Fenstern (window.open), statistische Erfassung von Bildschirmgrößen, das Abfragen oder Sperren der Bildschirmausrichtung über screen.orientation und das Erkennen, ob ein Fenster auf einem erweiterten Mehrbildschirm-Setup liegt (screen.isExtended, Window Management API).
Für responsives Layout ist screen meist nicht das richtige Werkzeug: Die Bildschirmgröße sagt nichts über die Größe des Viewports aus. Dafür sind CSS-Media-Queries, window.matchMedia() oder window.innerWidth/innerHeight besser geeignet.
Rückgabewert
Screen-Objekt. Die Eigenschaft ist schreibgeschützt; die Werte des Objekts können sich ändern, wenn das Fenster auf einen anderen Bildschirm verschoben wird.Beispiele
Grundlegende Bildschirminformationen auslesen
const { width, height, availWidth, availHeight, colorDepth } = window.screen;
console.log(`Bildschirm: ${width}×${height}`);
console.log(`Verfügbar: ${availWidth}×${availHeight}`);
console.log(`Farbtiefe: ${colorDepth} Bit`);
// Physische Auflösung in Gerätepixeln
const dpr = window.devicePixelRatio;
console.log(`Physisch: ${Math.round(width * dpr)}×${Math.round(height * dpr)}`);Popup-Fenster auf dem Bildschirm zentrieren
const openCenteredPopup = (url, w = 600, h = 500) => {
const left = (screen.availLeft ?? 0) + (screen.availWidth - w) / 2;
const top = (screen.availTop ?? 0) + (screen.availHeight - h) / 2;
return window.open(
url,
'login',
`width=${w},height=${h},left=${Math.round(left)},top=${Math.round(top)}`
);
};
document.querySelector('#login-btn')?.addEventListener('click', () => {
openCenteredPopup('https://example.com/oauth');
});Bildschirmausrichtung beobachten
const logOrientation = () => {
const { type, angle } = screen.orientation;
console.log(`Ausrichtung: ${type} (${angle}°)`);
};
logOrientation();
screen.orientation.addEventListener('change', logOrientation);Mehrbildschirm-Setup erkennen
if ('isExtended' in screen) {
console.log(screen.isExtended
? 'Mehrere Bildschirme angeschlossen'
: 'Nur ein Bildschirm');
} else {
console.log('Window Management API nicht unterstützt');
}// Wichtig · Fallstricke
- Nicht für Layout verwenden:
screen.widthist die Größe des Bildschirms, nicht die des Browserfensters. Für responsives Design sind Media-Queries,matchMedia()oderinnerWidthzu nutzen. - CSS-Pixel: Alle Maße sind CSS-Pixel und hängen von Zoom und Systemskalierung ab. Auf HiDPI-Displays mit
devicePixelRatioumrechnen. - Datenschutz/Fingerprinting: Bildschirmwerte werden gern für Browser-Fingerprinting genutzt. Firefox (mit
privacy.resistFingerprinting), Tor Browser und Safari können deshalb gerundete oder gefälschte Werte liefern. - Nicht standardisierte Eigenschaften:
availLeft/availTopgibt es nicht in allen Browsern;isExtendedund das Eventchangegehören zur Window Management API und werden nur von Chromium-basierten Browsern unterstützt (sichere Umgebung nötig). screen.orientation.lock()funktioniert meist nur im Vollbildmodus und auf Mobilgeräten.- Die Eigenschaft
window.screenselbst wird von allen Browsern unterstützt.