Wiki: JavaScript/Window/innerWidth Beispiel funktioniert nicht

[Linuchss]

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

[Matthias Scharwies]

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

[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