How to change a event listener from hover to click depending on device width on javascript

Question

i am facing issue on jquery while using hover listener event, the code is just working on desktop while on mobile i can't get it to work with the hover listener.So i just wanna implement click function instead of hover when the site is being displayed on mobile and hover on pc/laptop.I am sharing my code below. Also i am using blastjs and animate.css for text animation.

Header Element for the animation

<h2>About Me..</h2>

Jquery Code

$(document).ready(function () {
  $("h2").blast({
    delimiter: "character",
    tag: "span",
  });

  var pageAbout = $(".about_wrapper");

  $(".blast").on("hover", function () {
    var el = $(this);

    $(this).addClass("animated rubberBand");
    $(this).one(
      "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",
      function () {
        el.removeClass("animated rubberBand");
      }
    );
  });
});