移动设备上的 Fancybox 3 iframe 问题,模块高度太高

发布时间:2021-02-25 06:16

我正在尝试从 v.2.1.7 迁移到 v3.5.7。

在 v2.1.7 中,我在 iframe 类型上设置了 maxWidth 和 maxHeight。 iframe 中的内容始终为 1280 像素 x 960 像素。灯箱将显示在桌面上,居中且周围有足够的空间。它水平和垂直居中。效果很好。

我读过使用fancybox 的v3,我可以设置灯箱的宽度和高度,我认为这可以工作,除非我在fancybox-content div 上看到内嵌的宽度和高度。

<div class="fancybox-content" style="height: 960px; display: inline-block; width: 1031px;">

当我粉碎浏览器以获得更移动的视图时,高度保持在 960 像素,但宽度发生变化。

这是我的一个按钮的样子:

<a data-fancybox class="fancybox-media" data-type="iframe" 
data-src="[permalink goes here]" href="javascript:;" 
data-group="project-items-5" data-title="title goes here">

我的 javascript 设置如下所示。

jQuery('.fancybox-media').fancybox({  
  type:'iframe',
  toolbar: true,
  iframe: {
    css: {
      maxWidth: '1280px',
      maxHeight: '960px'
    }
  }
});

当我使用这些设置打开灯箱时,我在 .fancybox-content div 上看到的是:

<div class="fancybox-content" style="max-height: 960px; height: 960px; display: inline-block; width: 1051px;">

我看到当我粉碎浏览器时,灯箱内的内容会缩小,但灯箱本身却没有。它保持在 960 像素的高度。

有什么建议吗?

回答1