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

Question

一直在为此苦苦挣扎，无法正常工作。 我只希望此脚本可用于桌面。 谢谢。

<script type="text/javascript">
    $(document).ready(function() {
        $('#scroll_top').hide();
    });
    $(window).scroll(function() {
        if ($(this).scrollTop() == 0) {}
        if ($(this).scrollTop() >= 1000) { // If page is scrolled more than 50px
            $('#scroll_top').fadeIn(300); // Fade in the arrow
        } else {
            $('#scroll_top').fadeOut(300); // Else fade out the arrow
        }
    });
    $('#scroll_top').click(function() { // When arrow is clicked
        $('body,html').animate({
            scrollTop: 0 // Scroll to top of body
        }, 500);
    });
</script>          

Answer 1

您所说的台式机是什么意思？ 喜欢电脑吗？

如果是，则添加以下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
}

随时询问是否需要。

Answer 2

我会测试窗口大小，而不是设备类型。 测试窗口大小比测试设备更准确，此外，如果某人的确有一个大屏幕且有1.5万个屏幕（是的，我故意在夸大：））窗口打开并调整为非常小的尺寸，您是否要运行此脚本？ 可能不是。

但是。 。 。

我将此脚本识别为“滚动到顶部”按钮脚本，也许您确实希望它在较小的设备上运行，并且图像较小？ 我个人认为它们非常有用，只要它们的尺寸足够小而不会阻塞内容。 。 只是我的2美分， 我相信您比我更了解您的网站。

祝好运！

Answer 3

如果要依赖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

If( $("#isTablet").css("display") == "block") {
// do code
}

我不保证我的代码有效，但是您应该了解如何在js中使用CSS媒体查询的基本思想。 这样，如果您更改断点大小，则无需更新JavaScript。

另一方面，您始终可以使用以下方法进行简单的窗口宽度测试

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