更改功能不适用于平板电脑，但适用于移动设备

Question

我有一个类为“ send”的div，它在#myRange更改其在手机和平​​板电脑中的值时出现。在桌面设备上，我使用“点击”。

在移动设备和台式机上，它运行良好，但我看不到为什么不能在平板电脑上运行。它不会向#myRange添加可见的类。

var mediaQueries = {
  tablet: window.matchMedia('(min-width: 1024px)'),
  xl: window.matchMedia('(min-width: 1200px)'),
}

if(!mediaQueries.tablet.matches){
  console.log('mobile or tablet');
  $('#myRange').change(function(){ 
    $('.send').addClass('visible');
  });
} else {
  $('#myRange').on('click', function(){ 
    $('.send').addClass('visible');
    $('.myRange').addClass('mouse-visible');
  });
  console.log('desktop');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>