如何在使用@media手持設備時使用jQuery來觸發不同的功能？

我想讓網站響應。我的網站基本上都是一個頁面，我使用簡單的jQuery滾動功能導航到不同的部分。它適用於臺式機或筆記本電腦，但在移動設備或平板電腦上查看時效果並不理想，特別是在肖像中。所以我寫了一個jQuery函數，將我的網站的每個部分變成一個標籤，而不是滾動。因此，例如，如果您單擊「工作」部分，就會顯示您正在轉到其他頁面。我最終想要做的是在我的電腦上使用「滾動」功能和移動設備和平板電腦上的「選項卡」。使用@media掌上電腦可以調用「tab」功能嗎？或者，我需要創建一個「if語句中能夠確定在該網站正在從訪問？下面是我的標籤函數的代碼。如何在使用@media手持設備時使用jQuery來觸發不同的功能？

$(document).ready(function() { 
    $('.tabs a').click(function(){ 
     var $this = $(this); 
     $('.panel').hide(); 
     $('.tabs a.active').removeClass('active'); 
     $this.addClass('active').blur(); 
     var panel = $this.attr('href'); 
     $(panel).fadeIn(1000); 
     return false; 
    });//end click 
    $('.tabs li:first a').click(); 
}); // end ready

來源

2013-05-10 London804

http://stackoverflow.com/questions/6461300/triggering-jquery-with-css-media-queries – kapa 2013-05-10 23:42:13

不是100％肯定會有效，但我會添加modernizer到我的網站並嘗試一下。 – London804 2013-05-10 23:50:53

最好的辦法是使用window.matchMedia也有一些庫，供可以幫助你喜歡：

https://github.com/sparkbox/mediaCheck用。如果你想進一步去閱讀有關這一點上一些好東西，不是請閱讀this文章，因爲它描述了很多東西，從這個本質，它使用window.resize

後備。

來源

2013-05-11 00:21:00 Burimi

你有什麼想法在這種情況下如何寫if語句？我是否簡單地將每個函數放在不同的文件中，並告訴它如果符合要求X則加載一個函數，如果符合要求Y則加載另一個函數？ – London804 2013-05-11 00:42:55

您只能傳遞媒體查詢，並且如果它們被觸發，則不會執行該功能。 – Burimi 2013-05-11 14:44:54

如何在使用@media手持設備時使用jQuery來觸發不同的功能？

回答

相關問題