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

Question

我将这个 jQuery 用于一个名为 zoombox 的(优秀的)类似灯箱的插件:

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

它采用 http://vimeo.com/15171582 形式的 a 链接，解析 vimeo id (15171582) 并弹出一个加载 的灯箱code>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 调用..