JavaScript/Screen/availWidth
Die Eigenschaft Screen.availWidth speichert die maximal verfügbare Bildschirmbreite in Pixeln, die eine Anwendung im Vollbildmodus einnehmen kann. Unterscheidet sich von Screen.width, wenn feste Bildschirmelemente wie immer eingeblendete Taskleisten usw. links oder rechts einen Teil des Bildschirms einnehmen. Während width dann beispielsweise 1024 liefert, gibt availWidth z. B. nur 940 aus, weil an einer Seite eine Taskleiste 84 Pixel Breite einnimmt.
Syntax
breite = Screen.availWidth;
Inhaltsverzeichnis
Anwendungsbeispiel
Abfrage nach Taskbar
if (screen.availWidth != screen.width)
alert("Sie haben wohl seitlich eine Taskbar!");
Das Beispiel vergleicht die beiden Eigenschaften Screen.availWidth und Screen.width. Wenn beide nicht den gleichen Wert speichern, hat der Anwender vermutlich seine Taskleiste immer im Vordergrund. Das Beispiel gibt in diesem Fall einen entsprechenden Hinweis aus.
Geräteabmessungen
Zum Berechnen der Viewport- und Geräteabmessungen gibt es verschiedene Eigenschaften:
document.addEventListener("DOMContentLoaded", function () {
document.addEventListener('resize',messen);
messen();
function messen() {
document.getElementById('clientW').textContent = document.querySelector('html').clientWidth;
document.getElementById('innerW').textContent = window.innerWidth;
document.getElementById('outerW').textContent = window.outerWidth;
document.getElementById('clientH').textContent = document.querySelector('html').clientHeight;
document.getElementById('innerH').textContent = window.innerHeight;
document.getElementById('outerH').textContent = window.outerHeight;
document.getElementById('screenW').textContent = screen.width;
document.getElementById('availW').textContent = screen.availWidth;
document.getElementById('screenH').textContent = screen.height;
document.getElementById('availH').textContent = screen.availHeight;
}
});
Sowohl beim Laden, als auch bei einer Änderung des Viewports, wenn das resize-Event gefeuert wird, wird die Funktion messen aufgerufen.
In ihr werden die diversen Eigenschaften ermittelt und mit textContent in die passenden span-Elemente geschrieben.
Window.innerWidth und Window.innerHeight ermitteln die verfügbare Breite und Höhe des Viewports, während Window.outerWidth und Window.outerHeight eventuell vorhandene Scrollbars mitberechnen.
Screen.width und Screen.height ermitteln die Breite und Höhe des Bildschirms, während Screen.availWidth und Screen.availHeight die tatsächlich verfügbaren Maße ermitteln, indem sie vorhandene Taskbars abziehen.
Verwende entweder einen resizeObserver oder Window.matchMedia(), um deine Scripte effizienter laufen zu lassen!
Siehe auch
- JavaScript und CSS/CSS-Eigenschaften auslesen
auf Veränderungen reagieren
Weblinks
- CSSWG: availwidth
- MDN: Screen.availWidth
