Signatur
Beschreibung
screen.width liefert die Breite des Bildschirms, auf dem das Browserfenster gerade angezeigt wird. Der Wert ist in CSS-Pixeln angegeben, nicht in physischen Gerätepixeln. Auf einem 4K-Monitor mit 200 % Skalierung liefert screen.width daher 1920 und nicht 3840.
Der Wert beschreibt den gesamten Bildschirm, also auch Bereiche, die Taskleiste, Dock oder Menüleiste belegen. Den tatsächlich für Fenster nutzbaren Bereich liefert screen.availWidth. Die Breite des Browserfensters bzw. Viewports erhält man über window.innerWidth oder document.documentElement.clientWidth.
Praktisch nützlich ist die Eigenschaft für Statistik und Analytics, zum Positionieren von Popup-Fenstern mit window.open() oder zur groben Einschätzung der Geräteklasse. Für responsives Layout sind CSS-Media-Queries bzw. window.matchMedia() fast immer die bessere Wahl, weil sie sich auf den Viewport beziehen und auf Änderungen reagieren.
Rückgabewert
Beispiele
Bildschirmgröße und physische Auflösung ausgeben
const { width, height } = screen;
const dpr = window.devicePixelRatio;
console.log(`Bildschirm (CSS-Pixel): ${width} × ${height}`);
console.log(`Physisch ca.: ${Math.round(width * dpr)} × ${Math.round(height * dpr)}`);Popup-Fenster horizontal zentrieren
const openCentered = (url, w = 600, h = 500) => {
// availWidth/availHeight berücksichtigen Taskleiste & Dock
const left = Math.max(0, (screen.availWidth - w) / 2);
const top = 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');
});Bildschirm vs. Viewport vergleichen
const info = {
bildschirm: screen.width,
verfuegbar: screen.availWidth,
fenster: window.outerWidth,
viewport: window.innerWidth
};
console.table(info);
if (window.innerWidth < screen.width * 0.5) {
console.log('Fenster nutzt weniger als die halbe Bildschirmbreite.');
}Metriken für Analytics erfassen
const collectDisplayMetrics = () => ({
screenWidth: screen.width,
screenHeight: screen.height,
pixelRatio: window.devicePixelRatio,
orientation: screen.orientation?.type ?? 'unbekannt'
});
navigator.sendBeacon('/metrics', JSON.stringify(collectDisplayMetrics()));// Wichtig · Fallstricke
- Nicht für responsives Layout verwenden:
screen.widthändert sich nicht, wenn der Nutzer das Fenster verkleinert. Nutzen Sie stattdessen Media-Queries,window.matchMedia(),window.innerWidthoderResizeObserver. - CSS-Pixel statt Gerätepixel: Für die physische Auflösung multipliziert man mit
window.devicePixelRatio. Durch Skalierung kann das Ergebnis leicht vom tatsächlichen Wert abweichen. - Zoom und Mobilgeräte: Einige Browser (vor allem ältere Mobilbrowser und Firefox beim Seitenzoom) liefern abweichende Werte. Unter iOS Safari bezieht sich der Wert bei Drehung des Geräts traditionell auf die Hochformat-Breite, er wird also nicht mit der Ausrichtung vertauscht.
- Mehrere Monitore: Der Wert bezieht sich auf den Bildschirm, auf dem sich das Fenster gerade befindet. Details zu allen Bildschirmen liefert die Window Management API (
window.getScreenDetails(), derzeit nur in Chromium). - Datenschutz/Fingerprinting: Die Bildschirmgröße ist ein bekanntes Fingerprinting-Merkmal. Firefox mit
privacy.resistFingerprinting, der Tor Browser und Brave können gerundete oder gefälschte Werte (z. B. die Viewport-Größe) zurückgeben. - Die Unterstützung ist in allen Browsern seit jeher vorhanden.