jquery - .slideUp仅在移动设备上

我用轮播导航创建了Flexslider。导航的样式设置为移动屏幕尺寸的垂直列表。

在移动：
我想隐藏列表（单击的幻灯片标题除外），以便用户可以看到所选的幻灯片。

在大屏幕上：
我只希望简单的轮播导航正常工作，但是当然可以应用我的slideUp。

如何仅在移动设备上应用jquery功能？和，
这样的移动/桌面jquery共享标记的最佳实践是什么？

jQuery的：

$('a.current').bind('tapone',function(e){
  if($(this).hasClass('active')){
    $(this).removeClass('active');
    $('#carousel ul.slides').slideUp({duration: 300, easing: "easeOutQuad"});
    } else {
  $(this).addClass('active');
  $('#carousel ul.slides').slideDown({duration: 300, easing: "easeOutQuad"});
}
});

标记：

  <div class="controls-container">
  <div class="row">
    <div id="carousel" class="flexslider large-12">
      <a class="current show-for-small"><h3>1994</h3></a>
      <ul class="slides">
        <li>1995</li>
        <li>1996</li>
        <li>1997</li>
      </ul>

更新：

我最终利用了Modernizer，并向html标签添加了一个类。

if (Modernizr.mq('only all and (max-width: 768px)')) {
   $('html').addClass('sm-med');
}

并有条件地触发了一些JS：

if($(window).width() < 768) { ... }

最佳答案

不要使用$ .browser。您应该使用屏幕宽度，就像处理CSS的媒体查询一样。在JS中使用与媒体查询相同的断点（如果有的话），这样无论设备如何，所有用户都将获得流畅的体验。

如果您担心设备/浏览器是否具有某些功能，则应使用Modernizer之类的检测库。

if($(window).width() < 768) {
    // code for things smaller than ipads
}