Question

当使用fancyBox时，无论是图像还是iFrame（YouTube），并在移动设备上打开它然后旋转（横向到纵向，反之亦然），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 / DOLPHIN

fancyBox版本：2.1.5 PACK

P.S。这也发生在示例上，包括版本2和测试版！：/

Answer 1

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

要解决此问题，您可以轻松地使用css样式为fancybox类设置最大宽度＆＃34; fancybox-wrap＆＃34;和＆＃34; fancybox-inner＆＃34;。

示例：

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

这些规则使用！important，因为它们需要能够覆盖由fancybox选项设置的html宽度/高度。

您可以使用jquery函数轻松设置相同的样式，以便在fancybox的afterLoad选项中设置css样式（尽管使用比afterLoad更有效的方法，它仍然可以完成工作。）

fancyBox：设备/方向上的比例问题旋转

1 个答案: