響應JavaScript管理

我期待創建一個響應式網站。我希望某些JavaScript（即導航jquery）只能在移動版本上運行，而另一個導航jQuery會在同一個元素的桌面版上運行。我遇到RespondJS（http://responsejs.com/）和Media Check（https://github.com/sparkbox/mediaCheck）。我不確定他們是否是正確的解決方案，有人可以給我一個建議嗎？響應JavaScript管理

我要尋找類似：

<script> 

(some code to check if desktop) { 
    $(".navigation").runDesktopNavstyle(); 
    $(".slideshow").runDesktopSlideshow(); 
} 

(some code to check if tablet) { 
    $(".navigation").runTabletNavstyle(); 
    $(".slideshow").runTabletSlideshow(); 
} 

(some code to check if mobile) { 
    $(".navigation").runMobileNavstyle(); 
    $(".slideshow").runMobileSlideshow(); 
} 

</script>

來源

2013-06-11 Suthan Bala

你不需要JavaScript來響應這些天;）看到這篇文章：http://css-tricks.com/snippets/css/media-queries-for-standard-設備/ – gustavohenke

對不起，我的意思是我想要在桌面上使用不同的JavaScript應用於導航，而在移動設備或平板電腦上應用另一個應用。 –

我不建議提供高達取決於您是否使用的是手機或桌面等不同形式的JavaScript，它可以成爲一個維護的噩夢，而不是真正的迴應是什麼，你可能在這種情況下有一個單獨的移動網站。

但是，使用Bootstrap，您可以將響應類應用到您的元素，然後使用jQuery，您可以查找和選擇這些類。這意味着您所提供的相同的JavaScript文件了，但讓他們多一點聰明，他們需要的元素打交道時，例如：

<div class="visible-phone"> 
</div> 

<div class="visible-desktop"> 
</div> 

<script type="text/javascript"> 

$('.visible-phone').length > 0) { 
    // Do phone stuff 
} 

$('.visible-desktop').length > 0) { 
    // Do desktop stuff 
} 

</script>

很粗糙，但你的想法。

來源

2013-06-11 13:59:16 Lloyd

最簡單的辦法是來包裝你有條件的代碼是這樣的：

if(window.innerWidth < 640) { ... } // max-width:640px 
if(window.innerHeight > 800) { ... } // min-height:800px 
if(window.innerWidth < window.innerHeight) { ... } // orientation:portrait

事情是這樣的。但請注意，它只能包含在函數的內容中，因此您仍然可以定義它們。對於試驗：

$("#mynav").hover(function() { 
    if(window.innerWidth < 640) { /* do stuff */ } 
},...);

來源

2013-06-11 13:59:54

響應JavaScript管理

回答

相關問題