Jquery 媒體查詢 2 個設備

Question

我為主桌面屏幕制作了 jquery function，在滾動到頁面的某個部分后添加了 class。
但是是否可以在 function 上添加另外兩個特定於設備的媒體查詢（用於 iPad 和智能手機），以便我可以為每個設備媒體查詢設置scrollTop() > xxx ？

$(window).scroll(function () {
    if($(window).scrollTop() > 2700) {
      $('.div_name').addClass('display_on');
    } else {
      $('.div_name').removeClass('display_on');
    }
  });

我要添加的另外兩個媒體查詢是：

For Ipad :
@media only screen
  and (min-device-width: 601px)
  and (max-device-width: 1112px)
  and (-webkit-min-device-pixel-ratio: 2)

For Smartphone :
@media only screen and (max-device-width: 600px) 

提前致謝。

更新1：
我嘗試將它與 var 混合並制作如下代碼，但沒有奏效。

  var widthPC = window.matchMedia("(min-width: 768px)");
  var widthTB = window.matchMedia("(min-width: 601px)");
  var widthSP = window.matchMedia("(max-width: 600px)");
  responsive(widthPC);
  responsive(widthTB);
  responsive(widthSP);
  widthPC.addListener(responsive);
  widthTB.addListener(responsive);
  widthSP.addListener(responsive);

  function responsive(widthPC, widthTB, widthSP) {
    if (widthPC.matches) {
      $(window).scrollTop() > 2700 {
        $('.hor_chart_wrap_top').addClass('display_on');
      }
    } else if (widthTB.matches){
      $(window).scrollTop() > 3000 {
        $('.hor_chart_wrap_top').addClass('display_on');
      }
    } else if (widthSP.matches){
      $(window).scrollTop() > 3000 {
        $('.hor_chart_wrap_top').addClass('display_on');
      }
   }
   else {
    $('.hor_chart_wrap_top').removeClass('display_on');
 }};

Answer 1

您可以使用 matchMedia 檢查設備寬度

 if (window.matchMedia('(max-width: 600px)').matches) {
        
 }

Answer 2

我最終在下面制作了一個代碼，它可以工作：：

  $(window).scroll(function(){
    if ($(this).scrollTop() > 3200 && $(window).width() >= 1112) {
      $('.chart_1').addClass('display_on');
     }
     else if ($(this).scrollTop() > 2200 && $(window).width() >= 601 && $(window).width() <= 1112) {
      $('.chart_1').addClass('display_on');
     }
     else if ($(this).scrollTop() > 5000 && $(window).width() < 600) {
      $('.chart_1').addClass('display_on');
     }
     else {
      $('.chart_1').removeClass('display_on');
     }
  });