Question

经过大量研究和挫折后，我想我可能在我的方法中错误地在移动设备上禁用了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>`

Answer 1

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

例如：

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

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

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

Answer 2

我不完全确定我理解你的代码的逻辑，因为在你的条件语句中你启用fancybox条件是true还是false ....我猜你错了API选项overlayShow，适用于掩盖半透明背景，覆盖页面并位于fancybox后面，但不适用于fancybox本身。

无论如何，我已经在一些生产网站中运行了这个场景，而且我的方法基于这样一个事实：启用更容易if某些条件存在而不是禁用某些if存在某种情况。换句话说，if您检测到mobile device然后不要加载fancybox，简单。

我首选的方法是使用此脚本http://detectmobilebrowsers.com/来检测移动设备（浏览器）。请注意this page中有关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>

在移动设备上禁用Fancybox

2 个答案: