<picture> 标签 - 忽略 <source> 标签 && 在 iPad / Safari（桌面）上回退到 <img>

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 而非 tablet/iPad 上响应显示并回退到适当的 <source>。 <picture> 未响应视口宽度

在此先感谢您的帮助！

Answer 1

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

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

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

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

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

<picture> 标签 - 忽略 <source> 标签 && 在 iPad / Safari（桌面）上回退到 <img>

<picture> Tag - Ignoring <source> Tags && Falling back to <img> on iPad / Safari (Desktop)

html

safari

ipad

srcset

responsive