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

Question

Я хотел бы иметь два размера изображений, для маленьких и больших экранов. С fancybox, я использую srcset атрибут для изменения изображения fullview, как описано в демонстрации 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, нет никакой возможности установить его, и высокое разрешение загружается (1200 пикселей) вместо маленького на мобильном.

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

Спасибо

Answer 1

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

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

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