如何在 Fancybox 中将视口视为宽度 = 设备宽度答案

【问题标题】：How to get viewport considered as width=device-width in Fancybox如何在 Fancybox 中将视口视为宽度 = 设备宽度
【发布时间】：2019-02-03 19:44:48
【问题描述】：

我想要两种尺寸的图像，用于小屏幕和大屏幕。使用fancybox，我使用srcset 属性来更改fancybox 演示中描述的全视图图像，如下所示：

    <a  data-fancybox="test-srcset"
        data-type="image"
        href="img1200px.jpeg"
        data-srcset="img1200px.jpeg 1200w,
                     img640px.jpeg 640w"
    >
        <img width="250" src="img250px.jpeg" />
    </a>

来自 fancybox 的完整示例：https://codepen.io/anon/pen/wNdyYm?editors=1000

在移动设备上为我的网页设置了元数据：

<meta name="viewport" content="width=device-width" />

但是使用fancybox，没有设置选项，并且在移动设备上加载的是高清（1200px）而不是小。

我能做什么？是否有任何 jQuery hack 或其他任何东西？

谢谢

【问题讨论】：

标签： jquery fancybox viewport device-width

【解决方案1】：

实际上，脚本将相同的srcset 值设置为图像标签，其余的取决于浏览器。但是浏览器之间在如何选择要使用的源方面存在不一致，例如，请参阅 chrome 和 ff 上的这个演示 https://codepen.io/fancyapps/pen/LJwvzY?editors=1000，并尝试调整它们的大小。

【讨论】：

【解决方案2】：

所以我想出了一个 CSS/html 解决方案，使用meta 标签和媒体查询@media，没有srcset 属性。

对每个链接使用class 是否显示它取决于设备宽度。
为每张图片使用不同的链接指向完整图片。
使用data-fancybox属性区分两个全视图画廊。

这应该可行。

<!-- To have mobile considering the real width -->
<meta name="viewport" content="width=device-width" />

<div id="image1">
    <a  data-fancybox="gallery-screen" 
        data-type="image"
        href="img1200px.jpeg"
        class="screen"
    >
        <img width="250" src="img250px.jpeg" />
    </a>
    <a  data-fancybox="gallery-mobile" 
        data-type="image"
        href="img640px.jpeg"
        class="mobile"
    >
        <img width="250" src="img250px.jpeg" />
    </a>
</div>

CSS 显示良好的图片链接：

@media all and (max-width: 640px) {
    .screen {
        display: none;
    }
}

@media all and (min-width: 641px) {
    .mobile {
        display: none;
    }
}

查看codepen example

【讨论】：