How to get viewport considered as width=device-width in Fancybox

Question

I would like to have two sizes of images, for small and large screens. With fancybox, I'm using the srcset attribute to change the fullview image as described in the fancybox demo, with something like this :

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

Full example from fancybox : https://codepen.io/anon/pen/wNdyYm?editors=1000

On mobile for my pages, I've set up the meta :

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

But with fancybox, there is no option to set it, and the high definition is loaded (1200px) instead of the small one on mobile.

What can I do ? Is there any jQuery hack or anything else ?

Thanks

Answer 1

Actually, the script sets same srcset value to image tag, the rest is up to the browser. But there is inconsistency across browsers about how they choose what source to use, for example, see this demo https://codepen.io/fancyapps/pen/LJwvzY?editors=1000 on chrome and ff, and try resizing on both of them.

Answer 2

So I came up with a CSS/html solution, using the meta tag and media-queries @media, and no srcset attribute.

• Use a class for each link to display it or not depending on the device width.
• Use a different link to the full image for each one.
• Use the data-fancybox attribute to distinguish two fullview galleries.

This should work.

<!-- 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 to display the good link to image :

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

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

See a codepen example