Viewport-Emulator im Firefox

[Gunnar Bittersmann]

@@Gunnar Bittersmann

    // Event-Handler (beim Ändern der Fenstergroesse Viewport-Daten in DIV-Element-Textknoten schreiben)       
    $(window).bind('resize', function () 
     {
      $('#js-viewport-anzeiger').text('Viewport: ' + 'Breite: ' + $(window).width() + ' / Höhe: ' + $(window).height() + ' Pixel') 
     }).trigger('resize');
      
   });

wäre

    window.addEventListener('resize', resizeHandler);

    function resizeHandler() {
      document.querySelector('#js-viewport-anzeiger').textContent
        = 'Viewport: ' + 'Breite: ' + window.innerWidth + ' / Höhe: ' + window.innerHeight + ' Pixel';
    }

    resizeHandler();

Eigentlich wäre es wohl

    window.addEventListener('resize', function () {
      document.querySelector('#js-viewport-anzeiger').textContent
        = 'Viewport: ' + 'Breite: ' + window.innerWidth + ' / Höhe: ' + window.innerHeight + ' Pixel';

    });

    window.dispatchEvent(new Event('resize'));

Ich würde das aber auf die erstgenannte Weise machen – natürlich mit den im Vorposting genannten Verbesserungen.

Geht aber auch auf die zweite Art: Codepen

🖖 Live long and prosper