Antwort an „Gunnar Bittersmann“ verfassen

SELF-Forum

Viewport-Emulator im Firefox

Gunnar Bittersmann E-Mail-Adresse des Autors Homepage des Autors

@@Gunnar Bittersmann

Die jQuery-Bibliothek ist ein ziemlich großer Batzen, der da geladen werden muss. Oder nicht geladen werden muss, wenn man das Script auf „vanilla JavaScript“ umschreibt.

  jQuery(document).ready(function ()

wäre in JavaScript

  document.addEventListener('DOMContentLoaded', function ()

Das bräuchtest du aber gar nicht, wenn du das <script>-Element ans Ende des <body> setzt.

    // neues Element als Anzeige-Container als erstes Element im Body-Tag einfuegen...
    $( "body" ).prepend 
     ( 
      $('<div/>', // Attribute erzeugen...
       { 
        'id': 'js-viewport-anzeiger', 
        'text': 'Warte auf Resize-Event...'       
       })
     );

wäre

    document.body.insertAdjacentHTML(
      'afterbegin',
      '<div id="js-viewport-anzeiger">Warte auf Resize-Event...</div>',
    );

    // 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();

wobei man das '-auf-'-zu-Geraffel besser duch ein Templatestring ersetzt:

    window.addEventListener('resize', resizeHandler);

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

    resizeHandler();

Und document.querySelector('#js-viewport-anzeiger') sollte man nicht bei jedem resize-Event erneut ausführen, sondern einmalig am Anfang und in einer Variablen ablegen:

    const viewportAnzeiger = document.querySelector('#js-viewport-anzeiger');

    window.addEventListener('resize', resizeHandler);

    function resizeHandler() {
      viewportAnzeiger.textContent
        = `Viewport: Breite: ${window.innerWidth} / Höhe: ${window.innerHeight} Pixel`;
    }

    resizeHandler();

Sieht dann so aus: Codepen.

Und schon brauchst du die jQuery-Bibliothek nicht mehr, die Zeile

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

kann restlos entsorgt werden.

🖖 Live long and prosper

--
“In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”
— Bruce Springsteen, Manchester 2025-05-14
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar

Ihre Identität in einem Cookie zu speichern erlaubt es Ihnen, Ihre Beiträge zu editieren. Außerdem müssen Sie dann bei neuen Beiträgen nicht mehr die Felder Name, E-Mail und Homepage ausfüllen.

abbrechen