<picture> 标签 - 在 iPad / Safari（桌面）上忽略 <source> 标签并退回到 <image>答案

【问题标题】：<picture> Tag - Ignoring <source> Tags && Falling back to <img> on iPad / Safari (Desktop)<picture> 标签 - 在 iPad / Safari（桌面）上忽略 <source> 标签并退回到 <image>
【发布时间】：2019-04-10 03:05:32
【问题描述】：

我正在努力解决 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> 没有响应视口宽度

提前感谢您的帮助！

【问题讨论】：

您能否发布您正在测试的桌面/设备的浏览器版本？您可以更好地诊断问题，了解 <picture> 标记是否得到明确支持，这可能是也可能不是。
IOS / Safari 版本为 9.0

标签： html ipad safari responsive srcset

【解决方案1】：

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

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

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

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

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

【讨论】：

感谢您对此的帮助。这绝对是 Safari 版本的兼容性问题