3

经过大量研究和挫折后，我想我在移动设备上禁用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>

我相信这很简单，并且会感谢任何人提供的任何建议。

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

`<script type="text/javascript">
if( !jQuery.browser.mobile){
$(document).ready(function() {
$("#single1").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" 
});
$("#single2").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>`
4

2 回答 2

3

不过，我使用的一种方法远非理想，因为它仍在初始化 Fancybox，它是检查仅在移动响应视图中显示的元素的可见性，然后使用我的其他操作劫持点击绑定。

例如：

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

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

就像我说的那样，并不理想，但是嘿，它可以在完全响应的环境中工作，不需要依赖浏览器检测。

于 2013-12-06T01:04:25.447 回答
0

我不完全确定我理解了你的代码的逻辑，因为在你的条件语句中，无论条件是true还是false......我想你误会了 API 选项overlayShow，它适用于覆盖在页面和fancybox 后面，但不是fancybox 本身。

无论如何，我已经在一些生产站点中运行了这个场景，我的方法是基于这样一个事实，即启用某些if条件存在而不是禁用某些if条件存在要容易得多。换句话说，if你检测到一个mobile devicethen DON'T load fancybox，很简单。

我的首选方法是使用此脚本http://detectmobilebrowsers.com/来检测移动设备（浏览器）。请注意本页中有关 Apple 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>
于 2012-06-26T17:41:28.030 回答