Question

我创建了一个带有轮播导航的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) { ... }

Answer 1

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

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

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

Answer 2

如果您使用旧版本的jQuery，则可以使用$ .browser。（但是，从jQuery 1.9开始，这已经被弃用了。）

因此，您需要做的是在页面中添加一个类以进行特征检测。然后用它来激活你的脚本。

第三种选择是使用良好的'ol屏幕宽度。获取$（window）.width（）并为您希望动画发生的每个大小设置大小写。

$(window).resize(function() {
  var ww = $(window).width();
  if(ww <960) { 
      //do something
  }
});

.slideUp仅限移动设备

2 个答案: