Script soll erst bei definierter Fensterbreite ausgeführt werden

Hallo zusammen,

ich habe mir von blog.kulturbanause.de ein jQuery-Script kopiert, dessen Aufgabe es ist, gleiche Elemente an der Höhe des höchsten Elements ausrichten. Das funktioniert wunderbar. Hier das Script:

var highest_element = 0;

// Prüfe, welches Element am höchsten ist
$('.teaser').each(function() {
  if ($(this).height() > highest_element) {
    highest_element = $(this).height();
  }
});

// Weise diese Höhe allen Elementen zu.
$('.teaser').each(function() {
  $(this).height(highest_element);
});

Nun hätte ich aber gern, dass dieses Script erst ab einer Fensterbreite (Dokumentenbreite?) von 768 px seinen Dienst tut - bei schmalerer Darstellung sollte es ingoriert werden. Allerdings sind meine JS-Kenntnisse knapp über null - ich weiß lediglich, dass man mit JS Bedingungen von Fenstern und Bildschirmen abfragen kann (z. B. window.innerWidth), aber wie man das in eine Funktion bringt, die mein o. g. Script ausführt oder eben halt nicht, davon habe ich keine Ahnung.

Wäre jemand so freundlich, das mit mir gemeinsam zu erarbeiten? Allein und nur mit Googles Hilfe kriege ich es nicht hin.

Danke und Gruß

Felix

Sempervivum Herzlichen Dank für die schnelle Antwort! Und wieder habe ich etwas gelernt. Der CSS-Code ist schon in mein Projekt eingebaut und funktioniert prima.

Obwohl sich mein ursprüngliches Anliegen damit zunächst erledigt hat, würde mich die Lösung immer noch interessieren - einfach, um etwas für eventuelle spätere Anforderungen zu lernen. Also, falls jemand die Zeit, Geduld und Lust hat, es zu erläutern, würde ich mich sehr freuen.

Ich habe noch ein wenig gegoogelt und bin auf dieser Seite fündig geworden: https://dzone.com/articles/checking-media-queries-jquery (ganz unten)

Daraus ist jetzt dieses Script entstanden:

if (window.matchMedia('(min-width: 768px)').matches)
{

    var highest_element = 0;

    // Prüfe, welches Element am höchsten ist
    $('.teaser').each(function() {
        if ($(this).height() > highest_element) {
            highest_element = $(this).height();
        }
    });

    // Weise diese Höhe allen Elementen zu.
    $('.teaser').each(function() {
        $(this).height(highest_element);
    });
    
    function kb_equal_height() {
  var highest_element = 0;
 
  // Lösche die Höhe
  $('.teaser').each(function() {
    $(this).removeAttr('style');
  });

  // Prüfe, welches Element am höchsten ist
  $('.teaser').each(function() {
    if ($(this).height() > highest_element) {
      highest_element = $(this).height();
    }
  });

  // Weise diese Höhe allen Elementen zu.
  $('.teaser').each(function() {
    $(this).height(highest_element);
  });
};

window.onload = kb_equal_height;

var resizeTimer;
$(window).resize(function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(kb_equal_height, 100);
});
}

Die Anpassung von ".teaser" greift also erst, wenn der Viewport mindestens 768 px breit ist. Die Neuberechnung, wenn die Größe des Browserfensters verändert wird, funktioniert dabei allerdings nicht mehr. Na ja, nicht so schlimm ...

Für mein Projekt bleibe ich aber bei der CSS-Lösung Flexbox und muss mich dringend eingehender mit diesem Modul beschäftigen.