<picture> 元素在 iOS 上有意外行为
<picture> element has unexpected behaviour on iOS
我使用带有 srcset 的 <picture> 元素为不同的屏幕分辨率加载不同的图像。这是出于艺术指导的原因 - 我想要不同的形状 - 所以我需要使用 <picture>.
我遇到的问题是它不适用于 iOS - Chrome 和 Safari。尽管关于我可以使用的信息表明它应该：https://caniuse.com/#feat=srcset
<picture>
<source media="(min-width: 62em)" srcset="hero-home.jpg" sizes="100vw">
<source media="(min-width: 48em)" srcset="hero-home-991x490.jpg" sizes="100vw">
<source media="(min-width: 34.375em)" srcset="hero-home-767x460.jpg" sizes="100vw">
<source srcset="hero-home-549x575.jpg">
<img src="hero-home.jpg" class="crop">
</picture>
我也在使用 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">，我认为这是解决此问题的常见方法之一。
据我所知，我做的一切都是正确的，但是在 iOS（和 iOS 上），它短暂地加载了正确的图片，然后轻弹到 62em srcset。
有没有人遇到过这种行为？是不是我遗漏了一些奇怪的视网膜东西？
查看 CanIUse 以了解在有疑问时支持哪些较新的 HTML5 元素。
在这种特定情况下，它可能是以下任何问题的综合问题：
缺少 <picture> 元素的支持
仅使用 min-width 与 max-width 属性
不使用响应式测量来检测正确的视口大小
回退（例如：使用 50vw）
好的，我终于解决了这个问题！
iOS - 看起来也像任何 Mac OS - 不喜欢我使用 ems 作为单位。更改为像素和 BOOM。完全按预期工作。
您不能在 <picture> 元素中使用 REM 或 EM。尽管您在设计方面可能更喜欢它，但它在现实生活中并没有多大意义。
问题解释如下：
<picture> 元素是为解决特定问题而开发的。那个问题是等到页面加载后再决定使用哪个图像。
<img 标签很棒，它提供替代文本，易于访问。但以前使图像具有响应性的最佳方法是使用背景图像，然后您可以确定要使用的形状和大小。
一旦决定可以为移动设备提供一个小得多的图像（和不同的形状）。但是你失去了图像的可访问性，并不是所有的图像都适合作为背景图像。
然后您可以选择提供图像并替换它们，但有时这意味着在桌面上加载移动图像，或者更糟的是，在移动设备上加载巨大的桌面图像，然后用合适的图像替换（或者只是允许它调整大小）。因此，在移动设备上，您以较慢的速度两次加载图像。那是一个福音。
这个想法是，当获取页面时，你可以预加载资源，CSS，图像等。当调用 DOM 时，它也可以调用 CSS 并开始加载它.在过去，您会将所有 JS 放在页面底部以加快加载时间（不再是必需的）。这是为了阻止这些资源阻塞渲染。但是你不能预加载背景图片，你必须先阅读 CSS，这更像是 post-loading.
出于这个原因，发明了 srcset 和 <picture>，可以在 <img 标签上预加载正确的图像。当您调用 DOM 时，您可以同时开始下载 CSS 和图像。
EM 和 REM
现在...我们进入 EMs 和 REMs。这些是相对测量值。要了解 EM，您需要父容器度量，因为 EMs 与父容器相关。 REMs 与 body/default 测量有关。这意味着需要等待 CSS 加载才能理解那些 measurements/units.
使用 HTTP2 我们可以同时加载更多资源，这意味着我们可以在获取 DOM 和 CSS 的同时开始下载图像。 <picture> 和 srcset 是让这种情况发生的原因，但它不知道 EM 在加载过程中的那个点是什么，所以如果它可能会加载错误的图像猜对了，否则它只会等到页面加载，所以再一次，我们没有预加载。所以这就是为什么你必须使用 px.
我希望这是有道理的（我希望我的理解是正确的）
我使用带有 srcset 的 <picture> 元素为不同的屏幕分辨率加载不同的图像。这是出于艺术指导的原因 - 我想要不同的形状 - 所以我需要使用 <picture>.
我遇到的问题是它不适用于 iOS - Chrome 和 Safari。尽管关于我可以使用的信息表明它应该：https://caniuse.com/#feat=srcset
<picture>
<source media="(min-width: 62em)" srcset="hero-home.jpg" sizes="100vw">
<source media="(min-width: 48em)" srcset="hero-home-991x490.jpg" sizes="100vw">
<source media="(min-width: 34.375em)" srcset="hero-home-767x460.jpg" sizes="100vw">
<source srcset="hero-home-549x575.jpg">
<img src="hero-home.jpg" class="crop">
</picture>
我也在使用 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">，我认为这是解决此问题的常见方法之一。
据我所知，我做的一切都是正确的，但是在 iOS（和 iOS 上），它短暂地加载了正确的图片，然后轻弹到 62em srcset。
有没有人遇到过这种行为？是不是我遗漏了一些奇怪的视网膜东西？
查看 CanIUse 以了解在有疑问时支持哪些较新的 HTML5 元素。
在这种特定情况下，它可能是以下任何问题的综合问题：
缺少 <picture> 元素的支持
仅使用 min-width 与 max-width 属性
不使用响应式测量来检测正确的视口大小
回退（例如：使用 50vw）
好的，我终于解决了这个问题！
iOS - 看起来也像任何 Mac OS - 不喜欢我使用 ems 作为单位。更改为像素和 BOOM。完全按预期工作。
您不能在 <picture> 元素中使用 REM 或 EM。尽管您在设计方面可能更喜欢它，但它在现实生活中并没有多大意义。
问题解释如下：
<picture> 元素是为解决特定问题而开发的。那个问题是等到页面加载后再决定使用哪个图像。
<img 标签很棒，它提供替代文本，易于访问。但以前使图像具有响应性的最佳方法是使用背景图像，然后您可以确定要使用的形状和大小。
一旦决定可以为移动设备提供一个小得多的图像（和不同的形状）。但是你失去了图像的可访问性，并不是所有的图像都适合作为背景图像。
然后您可以选择提供图像并替换它们，但有时这意味着在桌面上加载移动图像，或者更糟的是，在移动设备上加载巨大的桌面图像，然后用合适的图像替换（或者只是允许它调整大小）。因此，在移动设备上，您以较慢的速度两次加载图像。那是一个福音。
这个想法是，当获取页面时，你可以预加载资源，CSS，图像等。当调用 DOM 时，它也可以调用 CSS 并开始加载它.在过去，您会将所有 JS 放在页面底部以加快加载时间（不再是必需的）。这是为了阻止这些资源阻塞渲染。但是你不能预加载背景图片，你必须先阅读 CSS，这更像是 post-loading.
出于这个原因，发明了 srcset 和 <picture>，可以在 <img 标签上预加载正确的图像。当您调用 DOM 时，您可以同时开始下载 CSS 和图像。
EM 和 REM
现在...我们进入 EMs 和 REMs。这些是相对测量值。要了解 EM，您需要父容器度量，因为 EMs 与父容器相关。 REMs 与 body/default 测量有关。这意味着需要等待 CSS 加载才能理解那些 measurements/units.
使用 HTTP2 我们可以同时加载更多资源，这意味着我们可以在获取 DOM 和 CSS 的同时开始下载图像。 <picture> 和 srcset 是让这种情况发生的原因，但它不知道 EM 在加载过程中的那个点是什么，所以如果它可能会加载错误的图像猜对了，否则它只会等到页面加载，所以再一次，我们没有预加载。所以这就是为什么你必须使用 px.
我希望这是有道理的（我希望我的理解是正确的）