javascript - 响应式 JavaScript 管理

Question

我希望创建一个响应式网站。我希望某些 JavaScript，即导航 jquery，只在移动版本上运行，而另一个导航 jquery 在桌面版本上运行相同的元素。我遇到了 RespondJS ( http://responsejs.com/ ) 和 Media Check ( https://github.com/sparkbox/mediaCheck )。我不确定他们是否是正确的解决方案，有人可以给我建议吗？

我正在寻找类似的东西:

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

Answer 1

最简单的选择是将您的条件代码包装成这样:

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 */ }
},...);