Signatur
Beschreibung
screen.availWidth ist eine schreibgeschützte Eigenschaft des Screen-Objekts. Sie gibt die Breite des Bildschirmbereichs zurück, den ein Fenster maximal einnehmen kann. Anders als bei screen.width sind hier Bereiche abgezogen, die das Betriebssystem dauerhaft belegt. Dazu gehören etwa eine links oder rechts angedockte Taskleiste unter Windows oder das seitlich platzierte Dock unter macOS.
Die Eigenschaft ist vor allem nützlich, wenn Sie mit window.open() Popup-Fenster öffnen und diese sinnvoll bemessen oder zentrieren wollen. Zusammen mit screen.availLeft (nicht standardisiert, aber weit verbreitet) können Sie die Position auch auf Systemen mit mehreren Monitoren korrekt berechnen.
Der Wert wird in CSS-Pixeln angegeben, nicht in physischen Gerätepixeln. Auf hochauflösenden Displays oder bei aktivem Browser-Zoom weicht er deshalb von der Hardware-Auflösung ab. Die tatsächliche Pixelzahl erhalten Sie näherungsweise mit screen.availWidth * window.devicePixelRatio.
Für responsives Layout ist availWidth nicht das richtige Werkzeug. Dort zählt die Breite des Viewports (window.innerWidth, CSS-Media-Queries oder matchMedia()), nicht die des Bildschirms.
Rückgabewert
screen.width.Beispiele
Verfügbare und gesamte Breite vergleichen
const { width, availWidth } = window.screen;
console.log(`Bildschirmbreite: ${width}px`);
console.log(`Verfügbar für Fenster: ${availWidth}px`);
console.log(`Vom System belegt: ${width - availWidth}px`);Popup horizontal zentriert öffnen
const openCenteredPopup = (url, popupWidth = 600, popupHeight = 500) => {
// availLeft ist nicht standardisiert, daher Fallback auf 0
const offsetLeft = screen.availLeft ?? 0;
const offsetTop = screen.availTop ?? 0;
const left = offsetLeft + Math.max(0, (screen.availWidth - popupWidth) / 2);
const top = offsetTop + Math.max(0, (screen.availHeight - popupHeight) / 2);
return window.open(
url,
'login',
`width=${popupWidth},height=${popupHeight},left=${Math.round(left)},top=${Math.round(top)}`
);
};
document.querySelector('#login')?.addEventListener('click', () => {
openCenteredPopup('https://example.com/oauth');
});Popup-Breite an den verfügbaren Platz anpassen
const desiredWidth = 1400;
// Maximal 90 % der verfügbaren Breite nutzen
const popupWidth = Math.min(desiredWidth, Math.floor(screen.availWidth * 0.9));
const physicalPx = Math.round(screen.availWidth * window.devicePixelRatio);
console.log(`Popup-Breite: ${popupWidth} CSS-px`);
console.log(`Verfügbar in Gerätepixeln: ~${physicalPx}`);// Wichtig · Fallstricke
- Nicht für Layout verwenden: Der Wert bezieht sich auf den Bildschirm, nicht auf das Browserfenster. Für responsive Designs nehmen Sie Media-Queries,
window.innerWidthoderResizeObserver. - Mehrere Monitore: In den meisten Browsern bezieht sich der Wert auf den Monitor, auf dem das Fenster gerade liegt. Verschiebt man das Fenster auf einen anderen Monitor, kann sich der Wert ändern. Ein zuverlässiges Ereignis für solche Änderungen gibt es nicht überall. Detaillierte Angaben zu allen Monitoren liefert die Window Management API (
window.getScreenDetails()), die derzeit nur in Chromium-Browsern verfügbar ist. - Zoom und Pixeldichte: Die Angabe erfolgt in CSS-Pixeln. Browser-Zoom und
devicePixelRatiobeeinflussen deshalb den Wert. - Datenschutz: Bildschirmmaße sind ein Merkmal für Browser-Fingerprinting. Firefox mit
privacy.resistFingerprinting, Tor Browser und Safari können gerundete oder gefälschte Werte liefern, oft identisch mitinnerWidthbzw.screen.width. - Mobilgeräte: Dort sind
availWidthundwidthmeist gleich. Bei einer Drehung des Geräts kann sich der Wert ändern. - Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird stillschweigend ignoriert.