Javascript 禁用手机上的Fancybox

经过大量研究和挫折之后，我想我可能在禁用移动设备上fancybox的方法中犯了一个错误

<script type="text/javascript">
$(document).ready(function() 

{ 
if( $(window).width() > 480 && (!navigator.userAgent.match(/Android/i) ||
!navigator.userAgent.match(/webOS/i) ||
!navigator.userAgent.match(/iPhone/i) ||
!navigator.userAgent.match(/iPod/i) ||
navigator.userAgent.match(/BlackBerry/))
){
$("a#for_fancybox").fancybox({
'overlayShow'  : false,
'transitionIn' : 'elastic',
'transitionOut'    : 'elastic'
}
else( $("a#for_fancybox").fancybox({ "scrolling": "yes", "centerOnScroll": "yes",        "showCloseButton": true, "height": "95%", "width": "95%", "type": "iframe", "autoScale": true,   "cyclic": true, "overlayOpacity": 0.8, "showNavArrows": false, "titleShow": false, "content":     "<div> n"}

</script>

$（文档）.ready（函数（）
{ 
if（$（window.width（）>480&&（！navigator.userAgent.match（/Android/i）||
！navigator.userAgent.match（/webOS/i）||
！navigator.userAgent.match（/iPhone/i）||
！navigator.userAgent.match（/iPod/i）||
navigator.userAgent.match（/BlackBerry/）
){
$（“a”表示“fancybox”）。fancybox({
“叠加显示”：错误，
“transitionIn”：“弹性”，
“transitionOut”：“弹性”
}
else（$）.fancybox（{“滚动”：“是”，“中心滚动”：“是”，“显示关闭按钮”：真，“高度”：“95%”，“宽度”：“95%”，“类型”：“iframe”，“自动缩放”：真，“循环”：真，“超容量”：0.8，“显示导航箭头”：假，“标题显示”：假，“内容”：“n”}

我相信这很简单，任何人都能提供建议，我将不胜感激

---

---

*我一直在玩，并且正在取得进展，但是脚本仍然在手机上运行。我想知道我是否正确执行了detectmobilebrowser.js执行（转换为.js文件并将脚本标记放在站点的头文件中）

`
如果（！jQuery.browser.mobile）{
$（文档）.ready（函数（）{
$（“#single1”）.fancybox({
“滚动”：“是”，“中心滚动”：“是”，“显示关闭按钮”：真，“高度”：“95%”，“宽度”：“95%”，“类型”：“iframe”，“自动缩放”：真，“循环”：真，“过容量”：0.8，“显示导航箭头”：假，“标题显示”：假，“内容”：“n”
});
$（“#single2”）.fancybox({
“滚动”：“是”，“中心滚动”：“是”，“显示关闭按钮”：真，“高度”：“95%”，“宽度”：“95%”，“类型”：“iframe”，“自动缩放”：真，“循环”：真，“过容量”：0.8，“显示导航箭头”：假，“标题显示”：假，“内容”：“n”
});
});
}
`

我不能完全确定我是否理解了代码的逻辑，因为在条件语句中，您正在启用fancybox，无论条件是

true

还是

false

…我想您可能误解了API选项

overlyshow

，该选项适用于页面上方的遮罩半透明背景d位于fancybox后面，但不是fancybox本身

无论如何，我已经在一些生产站点上运行了这个场景，我的方法基于这样一个事实：如果存在某个条件，那么启用某个

，而不是禁用某个
，如果存在某个条件。换句话说，
如果检测到一个
移动设备，那么就不加载fancybox，简单

我的首选方法是使用这个脚本来检测移动设备（浏览器）。请注意中有关苹果iPhone和iPad（平板电脑部分）的注释

那么您的条件语句应该如下所示：

<script type="text/javascript">
 if(!jQuery.browser.mobile){
  jQuery(document).ready(function() {
   alert("not a mobile device, fancybox will be enabled");
   jQuery("a#for_fancybox").fancybox({
    // options here
   }); // fancybox
  }); // ready
 } // if
</script>


如果（！jQuery.browser.mobile）{
jQuery（文档）.ready（函数（）{
警报（“非移动设备，将启用fancybox”）；
jQuery（“a#for_fancybox”）.fancybox({
//这里的选项
})；//fancybox
})；//准备好了吗
}//如果
我使用的一种方法，尽管它远不是理想的，因为它仍然初始化Fancybox，它是检查仅在移动响应视图中显示的元素的可见性，然后用我的其他操作劫持单击绑定

例如：

$('.fancybox').click(function() {
    if($('#mobile').is(':visible')) {
        // do something here
        return false;
    }
});

$('.fancybox').fancybox();

正如我所说，这并不理想，但它在一个完全响应的环境中工作，不需要依赖浏览器检测。
非常感谢您的帮助，看到我的编码逻辑哪里出了问题非常有用（我刚刚删除了警告行，因为它有点分散注意力）。我现在已经让这个脚本工作了；但是它似乎仍然在做自己的事情。fancybox连接到的href应该在移动设备上作为标准链接打开（在我看来）（没有启用fancybox）但是它陷入了一个刷新循环。标准操作系统上的fancybox也不再加载了：嗯……你正在注释fancybox选项，所以它不知道它是
iframe
类型……仅供参考，这个双斜杠
/
会禁用fancybox选项……从脚本中删除它们。另外，ID是唯一的，它们应该ld在同一文档中使用一次（您使用相同的
id=“for_fancybox”
两次）…您也只需要使用建议的脚本一次…您正在编写两次相同的脚本。再次感谢您-我做了一些更改以尝试解决上述问题，但它不符合我的要求。我删除了第二个脚本，但发现剩余的脚本仅适用于两个链接中的一个。然后我替换了第二个脚本使用旧脚本进行pt。然后再次尝试重复新脚本，无论我做什么，第二个按钮现在都不会在任何平台上的fancybox中打开。然后我使用iframe设置（将其更改为swf、image和ajax）但这些都没有达到要求的结果，它只是拒绝打球：-s。*我一直在打球，正在取得进展。
$('.fancybox').click(function() {
    if($('#mobile').is(':visible')) {
        // do something here
        return false;
    }
});

$('.fancybox').fancybox();