Load jquery script based on CSS media query

Question

Present behavior: All links on mobile version, loading in new window. But, desktop version works fine. Tried using "_self", not working.

Expected behavior: Mobile links have to open in same window and it should not affect other lightbox or popup behavior. Also, desktop version.

Is there a way to target links to stop propagation or return false if @media screen and (max-width: 767px) ?

If I use e.stopPropgation() or return false, it affects my desktop version links and lightbox and all other trigger action by redirect to "undefined".

Answer 1

Depending on your compatibility needs, one solution would be to use window.matchMedia()

if (window.matchMedia("(min-width: 400px)").matches) {
  /* the view port is at least 400 pixels wide */
} else {
  /* the view port is less than 400 pixels wide */ 
  $('.your-link-class').click(function (event) {
    event.stopPropagation();
    return false;
  })
}

Answer 2

if ($(window).width() < 768) {
   alert('Less than 768');
}