Как получить окно просмотра, рассматриваемое как ширина = ширина устройства в Fancybox

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 name="viewport" content="width=device-width" />

Но в fancybox нет никакой возможности установить его, и загружается высокая четкость (1200px) вместо маленького на мобильном.

Что я могу сделать?Есть ли какой-нибудь взлом jQuery или что-то еще?

Спасибо

Answer 1

Итак, я пришел к решению 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;
    }
}

См. пример кода

Answer 2

На самом деле, скрипт устанавливает то же значение srcset для тега изображения, остальное зависит от браузера.Но между браузерами существует несогласованность в отношении того, как они выбирают, какой источник использовать, например, посмотрите эту демонстрацию https://codepen.io/fancyapps/pen/LJwvzY?editors=1000 на chrome и ff и попробуйте изменить их размер.