<picture>标记-忽略<source />标记&&在iPad / Safari（桌面）

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>

预期的行为：在iPad上显示并回退到适当的<source>

当前行为：在iOS移动Safari（而非平板电脑/ iPad）上显示并回退到适当的<source>。 <picture>对视口宽度没有响应

在此先感谢您的帮助！

Answer 1

请检出CanIUse，以在有疑问时查看支持哪个更新的 HTML5 元素。有时，它确实可以帮助调试一些相当复杂的Safari或IE特定的支持问题。

在这种特定情况下，可能是以下任何一项的合并问题：

• 缺乏对<picture>元素的支持
• 仅使用min-width和max-width属性
• 不使用响应式测量来检测后备的正确视口大小（例如： 例如使用50vw ）

此Google responsive images post还可帮助您调试更多组合可能性，以针对每种屏幕尺寸正确回退到所需图像。

希望这会有所帮助！这个问题可能是this one的重复，您也可以在这里找到一些帮助。