如何仅在非移动浏览器上运行 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 调用..