basti1012.bplaced.net

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 ?

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>