2

我正在寻找创建一个响应式网站。我希望某些 JavaScript，即导航 jquery，仅在移动版本上运行，而另一个导航 jquery 在桌面版本上运行相同元素。我遇到了 RespondJS ( http://responsejs.com/ ) 和媒体检查 ( 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>
4

2 回答 2

2

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

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-11T13:59:54.037 回答
0

我不建议根据您是使用手机还是台式机等来提供不同形式的 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-11T13:59:16.137 回答