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

Question

使用 fancyBox 时，无论是图像还是 iFrame (YouTube)，在移动设备上打开它然后旋转（横向到纵向，反之亦然），fancyBox 无法缩放或不适合设备窗口的宽度？

fancyBox 选项：

$(文档).ready(函数() { $(".fancybox").fancybox({ 帮手：{ 媒体：真实， 标题：空
}, 宽度：800， 身高：450， 纵横比：真， 滚动：'不'， openEffect : '淡入淡出', closeEffect : '淡入淡出' }); }); 设备：SAM GALXY S3 操作系统：安卓 4.2 浏览器：FF / CHRME / DOLPHIN

fancyBox 版本：2.1.5 PACK

附言这也发生在示例中，包括版本 2 和测试版！ ：/

Answer 1

您的代码似乎正在为您的精美盒子设置静态宽度和高度值。这不是一件坏事，但它确实解释了为什么您的 fancybox 不适合设备屏幕：移动设备的宽度往往小于 800 像素。

要解决这个问题，您可以轻松地使用 css 样式来为 fancybox 类“fancybox-wrap”和“fancybox-inner”设置最大宽度。

例子：

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

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

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