JavaScript/Window/innerWidth
Aus SELFHTML-Wiki
< JavaScript | Window
Die Eigenschaft Window.innerWidth speichert die Breite des Anzeigebereichs eines Fensters.
Syntax
breite = Window.innerWidth;
Anwendungsbeispiel
Zum Berechnen der Viewport- und Geräteabmessungen gibt es verschiedene Eigenschaften:
Viewportabmessungen
ansehen …
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;
}
});
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.
Empfehlung: Verwenden Sie die Window.matchMedia()-Methode, mit der Sie bequem Media Queries abfragen können, um z.B.
- zusätzliche Inhalte je nach verfügbarem Viewport nachladen zu können.
Weblinks
- CSSWG: innerWidth
- MDN: Window.innerWidth
messenaufgerufen.In ihr werden die diversen Eigenschaften ermittelt und mit textContent in die passenden span-Elemente geschrieben.