javascript - 如何仅在非移动浏览器上运行 jQuery？

Question

我将这个 jQuery 用于一个名为zoombox的（优秀的）类似灯箱的插件：

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

它获取a表单中的链接http://vimeo.com/15171582，解析 vimeo id (15171582) 并弹出一个灯箱，该灯箱加载iframe带有此 URL 的链接：

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 调用..