如何在Fancybox中将视区视为width=device-width

Question

我想要两种尺寸的图像，分别用于大屏幕和小屏幕。对于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：

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

但对于fancybox，没有设置的选项，而且在移动设备上加载的是高清晰度(1200px)而不是小清晰度。

我能做些什么？有没有jQuery黑客或者其他什么东西？

谢谢

Answer 1

实际上，脚本将相同的srcset值设置为图像标记，其余的由浏览器决定。但是不同的浏览器在如何选择要使用的源代码方面存在不一致，例如，查看chrome和ff上的演示https://codepen.io/fancyapps/pen/LJwvzY?editors=1000，并尝试在这两个浏览器上调整大小。

Answer 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