如何只在非移动浏览器上运行jQuery？

Question

我正在使用这个jQuery作为一个名为zoombox的（优秀的）类似灯箱的插件：

        $('a.zoombox').zoombox({...});

它需要http://vimeo.com/15171582形式a链接，解析vimeo id（15171582）并弹出一个灯箱，该灯箱使用以下URL加载iframe ：

http://player.vimeo.com/video/15171582?autoplay=1&title=0&byline=0&portrait=0&wmode=transparent

我如何修改jQuery，以便在移动浏览器上查看时

1. 灯箱无法启动，并且
2. 简单链接转换为iframe链接？

Answer 1

您可以使用： http ： //detectmobilebrowsers.com/来检测移动设备。

或检测窗口宽度如：

function isMobile() {
   if(window.innerWidth <= 600) {
     return true;
   } else {
     return false;
   }
}

并使其响应如下：

// keep original url
$('a.zoombox').each(function() {
  var url = $(this).attr('href');
  $(this).data('url',url);
});

// on load
doMagic();

// resizing
$(window).resize(function() {
  doMagic();
});

// lightbox?
function doMagic() {
  $('a.zoombox').each(function() {
    var url = $(this).data('url');
    $(this).attr('href',url);
  });
  if (!isMobile) {
    $('a.zoombox').zoombox({...}); // lightbox here
  }
}

// detect mobile
function isMobile() {
  if(window.innerWidth <= 600) {
    return true;
  } else {
    return false;
  }
}

没有测试

编辑：加载时添加doMagic调用..