fancyBox：设备上的缩放问题/方向旋转

当使用fancyBox，无论是图像还是iFrame（YouTube），并在移动设备上打开并旋转（横向为纵向或反之亦然）时，fancyBox不会缩放或适合设备窗口的宽度？fancyBox：设备上的缩放问题/方向旋转

的fancybox选项：

 
    $(document).ready(function() { 
     $(".fancybox").fancybox({ 
      helpers : { 
       media: true, 
       title: null
 
       }, 
      width  : 800, 
      height  : 450, 
      aspectRatio : true, 
      scrolling : 'no', 
      openEffect : 'fade', 
      closeEffect : 'fade' 
     }); 
    });

设备：SAM GALXY S3 操作系统：Android 4.2版本浏览器：FF/CHRME /海豚

的fancybox版本：2.1.5 PACK

附：这种情况也发生在这些例子上，包括版本2和测试版本！：/

来源

2015-01-21 nmuhammad

您的代码似乎为您的花哨框设置了一个静态宽度和高度值。这不是一件坏事，但它确实解释了为什么你的fancybox不适合设备屏幕：移动设备的宽度通常小于800px。

为了解决这个问题，你可以很容易地使用CSS样式来设置fancybox类“fancybox-wrap”和“fancybox-inner”的最大宽度。

例子：

.fancybox-wrap{max-width: 95%!important;} 
.fancybox-inner {max-width: 100%!important;}

这些规则使用非常重要，因为他们需要能够覆盖HTML宽/高了fancybox选项设置！

可以使用一个jQuery函数来设置CSS样式中的fancybox的后负荷选项方便地设定相同的样式（虽然可能有更有效的方法比后负荷使用，它还是应该把工作做好。）

来源

2015-02-18 17:01:26 skrawler

fancyBox：设备上的缩放问题/方向旋转

回答

相关问题