如何禁用取決於媒體查詢的特定腳本？

一直在努力與這一個，不能得到它的工作。我只想讓這個腳本適用於桌面。謝謝。如何禁用取決於媒體查詢的特定腳本？

<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>

來源

2016-02-13 foch

你是什麼意思桌面？像電腦？

如果是添加如果條件如下：

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 
}

隨意問如果需要。

來源

2016-02-13 12:43:52 Hugz

謝謝你，但沒有工作 – foch

MMMM！奇怪的。我已經編輯了我的答案來添加寬度條件，也許它會更好地工作。讓我知道 – Hugz

非常感謝。不幸的是沒有工作，無論哪一個Whyyyy oh whyyyy – foch

我會測試窗口大小，而不是設備類型。測試窗口大小比測試設備更準確，此外，如果有人確實有一個大屏幕與15萬（是的，我誇大了目的:)）窗口打開並調整大小非常小，你想這個腳本運行？可能不會。

但是。。。

我認識到這個腳本是一個「滾動到頂部」按鈕腳本，也許你想讓它在較小的設備上工作，只是一個較小的圖像？我個人發現它們非常有用，只要它們尺寸足夠小，不會阻擋內容。。只是我的2美分。我相信你比我更瞭解你的網站。

祝你好運！

來源

2016-02-13 13:02:29

謝謝:)）是的，我已經考慮過了，在我的情況下（不是太多的項目），我相信滾動是一種更快的方式來回到頂端，而不是昂貴的點擊。 – foch

如果你想依靠CSS媒體查詢，你可以添加3個不可見的元素到你的HTLM，然後測試顯示是否設置爲阻止。

添加THES元素頁腳

#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 
}

來源

2016-02-14 10:14:55

如何禁用取決於媒體查詢的特定腳本？

回答

相關問題