JS Funktion nur dann ausführen wenn das Fenster eine bestimmte Größe hat?
Wie könnte man zB sagen die Funktioniert nur dann wenn das Fenster mindestens 1200px breit ist?
2 Antworten
Mit matchMedia
Du schreibst einfach eine if Funktion. Also z.B.:
function screenFunction(window.matchMedia("(max-width: 1200px)")) {
if (window.matchMedia("(max-width: 1200px)").matches) {
document.body.style.backgroundColor = "yellow";
}
}
screenFunktion(window.matchMedia("(max-width: 1200px)")); //Die Funktion wird ausgeführt, wenn das Dokument geladen wird.
Der Body ist nun nur gelb, wenn das Fenster nur 1200px breit ist.
Genauso kannst du nun deine Funktion, die ausgeführt werden soll, in das if setzen.
Hier hast du noch ein Beispiel: https://www.w3schools.com/howto/howto_js_media_queries.asp
const width = window.innerWidth || document.documentElement.clientWidth ||
document.body.clientWidth;
if(width < 1200)
return;
//Der eigentliche Code