<picture> Tag - Игнорирование <source>Тегов && Откат к <img>на iPad / Safari (Desktop)

Question

Я пытаюсь решить проблему с адаптивными изображениями на iPad и не могу найти решение здесь. У меня есть следующий код HTML5, примененный к баннеру, чтобы он был отзывчивым.

<picture>
   <source media="(min-width: 1081px)" srcset="desktop-image">
   <source media="(min-width: 661px)" srcset="tablet-image">
   <source media="(min-width: 0px)" srcset="mobile-image">
   <img src="desktop-image">
</picture>

Ожидаемое поведение: Отзывчиво отображается и возвращается к соответствующему <source> на iPad

Текущее поведение: Отзывчиво отображается и возвращается к соответствующему <source> на мобильном Safari на iOS, но не на планшете / iPad. <picture> не отвечает на ширину области просмотра

Заранее спасибо за помощь!

Answer 1

Проверьте CanIUse , чтобы увидеть, какие из более новых HTML5 элементов поддерживаются, когда есть сомнения. Иногда это может действительно помочь отладить некоторые довольно запутанные проблемы поддержки Safari или IE.

Not Supported by iOS < v9.2">

В этом конкретном сценарии это может быть комбинированная проблема любого из следующего:

• отсутствие поддержки элемента <picture>
• с использованием только свойства min-width против max-width
• не использует адаптивные измерения для определения правильного размера области просмотра для запасных вариантов ( например: с использованием 50vw, например )

Эта публикация Google отзывчивых изображений может также помочь вам отладить еще несколько возможностей комбинирования для правильного отката к нужному изображению для каждого размера экрана.

Надеюсь, это поможет! Этот вопрос может быть возможной копией этого , и вы также можете найти помощь здесь.