Wiki: JavaScript/Window/innerWidth Beispiel funktioniert nicht
Linuchss
- javascript
- wiki
Moin,
ich möchte CSS für verschiedene Viewport-Breiten testen und die Breite anzeigen. Das Wiki-Beispiel unter "Vorschau" funktioniert in meinem FF 68.0.2 aber nicht.
Die angezeigten Abmessungen ändern sich nicht bei Änderung der Viewport-Größe.
Bei Mozilla habe ich was gefunden, das funktioniert:
<p><span id="innerW"></span> x <span id="innerH"></span></p>
const widthOutput = document.querySelector('#innerW');
const heightOutput = document.querySelector('#innerH');
function reportWindowSize() {
heightOutput.textContent = window.innerHeight;
widthOutput.textContent = window.innerWidth;
}
document.addEventListener('DOMContentLoaded',reportWindowSize);
window.onresize = reportWindowSize;
Gilt die Mozilla-Seite auch für andere Browser außer FF?
Gruß, Linuchs
Servus!
Moin,
ich möchte CSS für verschiedene Viewport-Breiten testen und die Breite anzeigen. Das Wiki-Beispiel unter "Vorschau" funktioniert in meinem FF 68.0.2 aber nicht.
Die angezeigten Abmessungen ändern sich nicht bei Änderung der Viewport-Größe.
Entschuldigus: Da müsste ich /man / Du (?) einen Eventhandler für orientationchange oder onresize inbauen. Beim Neuladen der gedrehten Seite geht's.
Bei Mozilla habe ich was gefunden, das funktioniert:
<p><span id="innerW"></span> x <span id="innerH"></span></p>
const widthOutput = document.querySelector('#innerW'); const heightOutput = document.querySelector('#innerH'); function reportWindowSize() { heightOutput.textContent = window.innerHeight; widthOutput.textContent = window.innerWidth; } document.addEventListener('DOMContentLoaded',reportWindowSize); window.onresize = reportWindowSize;
Gilt die Mozilla-Seite auch für andere Browser außer FF?
Probier's aus und berichte!
Herzliche Grüße
Matthias Scharwies
Servus!
Ist gefixt, der Event-Handler wurde nicht eingebaut. Jetzt funzt's.
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;
}
});
Herzliche Grüße
Matthias Scharwies