如何根據媒體查詢禁用特定腳本？

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
}