Breakpoint für mobile menu mit jQuery ?

Guten Tag, auf meiner Seite wird das Menü mit einer jQuery(function($) aufgerufen. Ich möchte vorher abfragen, ob: @media only screen and ( max-width: 768px ) > dann soll eine andere funktion aufgerufen werden. Wie kann ich das schreiben ?
Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <h3>offsetWidth offsetHeight</h3> <p id="w"></p> <p id="h"></p> <hr> <h3>screen.availHeight screen.availWidth</h3> <p id="aw"></p> <p id="ah"></p> <hr> <h3>clientX clientY</h3> <p id="mw"></p> <p id="mh"></p> <hr> <h3>pageX pageY</h3> <p id="pw"></p> <p id="ph"></p> <script> $(window).ready(function() { var sio=$('#slide-in-open'); var simc=$('.slide-in-menu-container'); if($(window).width()<=768){ sio.addClass('open'); simc.addClass('slide-in-menu'); }else{} sio.click(function(){ sio.toggleClass('open'); simc.toggleClass('slide-in-menu'); }); }); window.addEventListener('resize',re) function re(){ w.innerHTML="Breite: " + document.body.offsetWidth+" Pixel"; h.innerHTML=" avail Höhe: "+document.body.offsetHeight + " Pixel"; aw.innerHTML="Breite: " + window.screen.availHeight+" Pixel"; ah.innerHTML=" avail Höhe: "+window.screen.availWidth + " Pixel"; } re(); window.addEventListener('mousemove',mo) function mo(e){ mw.innerHTML="Breite Client: " + e.clientX+" Pixel"; mh.innerHTML=" Höhe Client: "+e.clientY + " Pixel"; pw.innerHTML="Page X " + e.pageX+" Pixel"; ph.innerHTML="Page Y "+e.pageY + " Pixel"; } mo(); </script>