Javascript 如何根据媒体查询禁用特定脚本？

一直在努力解决这个问题，但无法使其发挥作用。我只希望此脚本适用于桌面。 谢谢

$（文档）.ready（函数（）{
$（“#滚动到顶部”）.hide（）；
});
$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）==0）{}
if（$（this）.scrollTop（）>=1000）{//如果页面滚动超过50px
$（“#滚动_-top”）.fadeIn（300）；//在箭头中淡入
}否则{
$（“#滚动上方”）.fadeOut（300）；//否则将淡出箭头
}
});
$（“#滚动到顶部”）。单击箭头时，单击（函数（）{//
$（'body，html'）。设置动画({
scrollTop:0//滚动到正文顶部
}, 500);
});

桌面是什么意思？像电脑

如果是，请在下面添加If条件：

if( !(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) ) {
 // Your code
}

下面的条件显示所有智能手机或平板电脑浏览器

/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)

条件之前的“！”使它可以识别所有其他的：所以计算机也可以识别其他的

如果窗口宽度小于1024px，您也可以尝试使用窗口宽度。您可以假设该设备是平板电脑或智能手机

if (window.innerWidth <= 1024){
    //your code
}

---

if（window.innerWidth你所说的桌面是什么意思？比如电脑

如果是，请在下面添加If条件：

if( !(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) ) {
 // Your code
}

下面的条件显示所有智能手机或平板电脑浏览器

/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)

条件之前的“！”使它可以识别所有其他的：所以计算机也可以识别其他的

如果窗口宽度小于1024px，您也可以尝试使用窗口宽度。您可以假设该设备是平板电脑或智能手机

if (window.innerWidth <= 1024){
    //your code
}

如果（window.innerWidth我会测试窗口大小，而不是设备类型。测试窗口大小比测试设备更准确。此外，如果有人确实有一个15000的大屏幕（是的，我故意夸大：））窗口打开并调整了非常小的大小，你想让这个脚本运行吗？可能不会

但是

我认为这个脚本是一个“滚动到顶部”按钮脚本，也许你真的想让它在更小的设备上工作，只需要一个更小的图像？我个人觉得它们非常有用，只要它们的大小足够小，不阻止内容。就我的2美分。我相信你比我更了解你的网站

祝你好运！
我会测试窗口大小，而不是设备类型。测试窗口大小比测试设备更准确。此外，如果有人的大屏幕上有15000个（是的，我故意夸大了：））窗口打开并且大小调整得非常小，你想运行此脚本吗？可能不会

但是

我认为这个脚本是一个“滚动到顶部”按钮脚本，也许你真的想让它在更小的设备上工作，只需要一个更小的图像？我个人认为它们非常有用，只要它们的大小足够小，不会阻塞内容。就我的2美分，。我相信你比我更了解你的网站

祝你好运
 如果您想依赖css媒体查询，可以向HTLM添加3个不可见元素，然后测试显示是否设置为块

将这些元素添加到页脚

#isMobile,#isTablet{ 
     Display:none;
}
@media (max-width: 500px){
    #isMobile{
     Display: block;
    }
 }
@media (min-width: 501px) and (max-width: 1024px){
    #isTablet{
     Display: block;
    }
 }

Js

我不保证我的代码能正常工作，但您应该了解如何在js中使用css媒体查询。这样，如果更改断点大小，就不需要更新javascript

另一方面，您可以随时使用进行简单的窗口宽度测试

if( $(window).width() > 1024 ){
    //do code
}

如果您想依赖css媒体查询，可以向HTLM添加3个不可见元素，然后测试显示是否设置为块

将这些元素添加到页脚

#isMobile,#isTablet{ 
     Display:none;
}
@media (max-width: 500px){
    #isMobile{
     Display: block;
    }
 }
@media (min-width: 501px) and (max-width: 1024px){
    #isTablet{
     Display: block;
    }
 }

Js

我不保证我的代码能正常工作，但您应该了解如何在js中使用css媒体查询。这样，如果更改断点大小，就不需要更新javascript

另一方面，您可以随时使用进行简单的窗口宽度测试

if( $(window).width() > 1024 ){
    //do code
}

嗯！！！奇怪的我已经编辑了我的答案，添加了宽度条件，也许效果会更好。让我知道，非常感谢，朋友。不幸的是，两个都不行。Whyyyy oh whyyyyyplus当我使用它时，滚动后箭头不会出现，但它从开始就在那里。我实际上在代码上犯了一个错误。1024不应位于引号之间，因为window innerWidth的结果不是字符串而是数字。我已经对我的答案作了更正。现在它应该可以工作了。让我知道谢谢，但还是不知道！！！奇怪的我已经编辑了我的答案，添加了宽度条件，也许效果会更好。让我知道，非常感谢，朋友。不幸的是，两个都不行。Whyyyy oh whyyyyyplus当我使用它时，滚动后箭头不会出现，但它从开始就在那里。我实际上在代码上犯了一个错误。1024不应位于引号之间，因为window innerWidth的结果不是字符串而是数字。我已经对我的答案作了更正。现在它应该可以工作了。让我知道谢谢，但还是没有谢谢你：）是的，我已经考虑过了，在我的情况下（没有太多的项目），我相信滚动是一个更快的方式回到顶端，而不是昂贵的点击。谢谢：）是的，我已经考虑过了，在我的情况下（没有太多的项目）我相信滚动是一种更快的返回顶部的方式，而不是昂贵的点击。