Linuchss: Wiki: JavaScript/Window/innerWidth Beispiel funktioniert nicht

problematische Seite

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

  1. problematische Seite

    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

    --
    Heute mal keine Signatur
    1. problematische Seite

      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

      --
      Heute mal keine Signatur