如何获得视视为的fancybox宽度=设备宽度

Question

我想有图像，为小和大屏幕的两种尺寸。随着的fancybox，我使用的srcset属性作为演示的fancybox描述，像这样的东西来改变fullview图像：

    <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，没有选项来设置它，高清被加载（1200像素），而不是在移动设备上的小之一。

我能做什么 ？是否有任何的jQuery破解或别的什么吗？

谢谢

Answer 1

实际上，脚本设置相同srcset值图像标签，剩下的就是浏览器。但有跨浏览器的不一致性他们如何选择使用什么来源，例如，看到Chrome和FF这个演示https://codepen.io/fancyapps/pen/LJwvzY?editors=1000，并尝试调整他们两个。

Answer 2

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

• 使用class为每个链接以显示它或者不依赖于设备的宽度。
• 使用不同的链接，以完整的图像的每一个。
• 使用data-fancybox属性来区分两种fullview画廊。

这应该工作。

<!-- 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