Javascript JS/jQuery检测方向变化，只允许基于方向变化的函数

JS/jQuery有点新，但我认为我已经成功地解决了目前为止的问题

如果在手机上或平板电脑上（纵向），我会启用单击功能，但是我注意到，如果在平板电脑上，我将其旋转以将方向更改为横向，它仍然允许我单击并启动该功能

我如何调整我下面的代码，这样如果在平板电脑上改为横向，它就不会触发JS点击功能

// mobile
var isMobile = window.matchMedia("only screen and (max-width : 40em)");

// tablet
var isTablet = window.matchMedia("only screen and (max-width : 60em)");
var isTabletPortraitOnly = window.matchMedia("only screen and (max-width : 60em) and (orientation : portrait)");

/* mobile cart slideout */
// open the lateral panel
if(isMobile.matches || isTabletPortraitOnly.matches){
  var $miniCart = $('#cart_over');
  var $cartLink = $('.mini-cart');
  var $siteContent = $('.top-header-container, .main-content, footer');

  $cartLink.on('click', function(event){
    event.preventDefault();
    if ($miniCart.hasClass("cart-slide-in")) {
      $miniCart.addClass("cart-slide-out");
      $siteContent.addClass("content-slide-in");
    } else if ($miniCart.hasClass("cart-slide-out")) {
      $miniCart.removeClass('cart-slide-out');
      $miniCart.addClass("cart-slide-in");
    } else {
      $miniCart.addClass("cart-slide-in");
    }

    if ($siteContent.hasClass("content-slide-out")) {
      $siteContent.addClass("content-slide-in");
      $siteContent.removeClass("content-slide-out");
    } else if ($siteContent.hasClass("content-slide-in")) {
      $siteContent.addClass("content-slide-out");
      $siteContent.removeClass("content-slide-in");
    } else {
      $siteContent.addClass("content-slide-out");
    }
  });

  //clode the lateral panel
  $('#cart_close').on('click', function(event){

    if ($miniCart.hasClass("cart-slide-in")) {
      $miniCart.removeClass('cart-slide-in');
      $miniCart.addClass('cart-slide-out');
      $siteContent.removeClass("content-slide-out");
      $siteContent.addClass("content-slide-in");      
      event.preventDefault();
    }
  });
}

更新

我设法解决了这个问题

$(window).bind('orientationchange', function(event) {
  alert('new orientation:' + orientation); 
});

然而，它返回90或-90的横向和0或180的纵向。。。我猜可能很接近，但没有，所以我只使用if语句，所以如果90或-90这样做。。。还是有更好的方法来处理肖像画或风景画

更新2

我想，如果我在函数中添加条件，并设置加载和方向更改，可能会像再次检查一样工作。。。但不确定是不是。。。。我想我的思路是对的，有以下想法吗

function cartSlide(){
  if(isMobile.matches || isTabletPortraitOnly.matches){
    var $miniCart = $('#cart_over');
    var $cartLink = $('.mini-cart');
    var $siteContent = $('.top-header-container, .main-content, footer');

    $cartLink.on('click', function(event){
      event.preventDefault();
      if ($miniCart.hasClass("cart-slide-in")) {
        $miniCart.addClass("cart-slide-out");
        $siteContent.addClass("content-slide-in");
      } else if ($miniCart.hasClass("cart-slide-out")) {
        $miniCart.removeClass('cart-slide-out');
        $miniCart.addClass("cart-slide-in");
      } else {
        $miniCart.addClass("cart-slide-in");
      }

      if ($siteContent.hasClass("content-slide-out")) {
        $siteContent.addClass("content-slide-in");
        $siteContent.removeClass("content-slide-out");
      } else if ($siteContent.hasClass("content-slide-in")) {
        $siteContent.addClass("content-slide-out");
        $siteContent.removeClass("content-slide-in");
      } else {
        $siteContent.addClass("content-slide-out");
      }
    });

    //clode the lateral panel
    $('#cart_close').on('click', function(event){

      if ($miniCart.hasClass("cart-slide-in")) {
        $miniCart.removeClass('cart-slide-in');
        $miniCart.addClass('cart-slide-out');
        $siteContent.removeClass("content-slide-out");
        $siteContent.addClass("content-slide-in");      
        event.preventDefault();
      }
    });
  }
}

// open the lateral panel
if(isMobile.matches || isTabletPortraitOnly.matches){
  cartSlide();
}

$(window).bind('orientationchange', function(event) {
  cartSlide();
});

---

在

orientationchange

甚至

resize

上，您只需获得屏幕的宽度和高度，然后查看哪个更大，以决定您是在纵向还是横向。尽管有了代码，您也可以只做

var-orientation=Math.abs（event.orientation）==90？““风景”：肖像我不知道该如何处理，我正在尝试，但目前没有成功，但是JS/jQuery是新的。。。。能帮忙吗？当然，如果你有时间的话。我实际上已经将click函数和vars放入了一个函数中，这样就可以在更容易的条件下调用，这样就不必复制了。。。要我添加一个更新供您查看吗？实际上我在这里创建了一个：在
orientationchange
或者甚至
resize
上，你只需要得到屏幕的宽度和高度，然后看看哪个更大，以决定你是在纵向还是横向。尽管有了代码，您也可以只做
var-orientation=Math.abs（event.orientation）==90？““风景”：肖像我不知道该如何处理，我正在尝试，但目前没有成功，但是JS/jQuery是新的。。。。能帮忙吗？当然，如果你有时间的话。我实际上已经将click函数和vars放入了一个函数中，这样就可以在更容易的条件下调用，这样就不必复制了。。。要我添加一个更新供您查看吗？实际上，我在这里创建了一个：