<picture> 元素在 iOS 上出现意外行为

Question

我使用<picture> 元素和srcset 来为不同的屏幕分辨率加载不同的图像。这是出于艺术指导的原因——我想要不同的形状——所以我需要使用<picture>。

我遇到的问题是它在 iOS 上不起作用——Chrome 和 Safari 都不起作用。尽管 Can I Use 上的信息表明它应该：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。

以前有人遇到过这种行为吗？我错过了一些奇怪的视网膜吗？

Answer 1

好的，我最终解决了这个问题！

iOS - 并且看起来也像任何 Mac OS - 不喜欢我使用 ems 作为单位。更改为像素和 BOOM。完全按预期工作。

Answer 2

您不能在<picture> 元素中使用REMs 或EMs。尽管您在设计方面可能更喜欢它，但在现实生活中却没有多大意义。

以下是问题的解释：

<picture> 元素是为解决特定问题而开发的。这个问题是等到页面加载后才决定使用哪个图像。

<img 标签很棒，它提供替代文本，易于访问。但以前使图像具有响应性的最佳方法是使用背景图像，然后您可以确定要使用的形状和大小。

一旦决定您可以为移动设备提供一个小得多的图片（以及不同的形状）。但是你失去了图像的可访问性，并不是所有的图像都适合作为背景图像。

然后您可以选择提供图片并替换它们，但有时这意味着在桌面上加载移动图片，或者更糟糕的是，在移动设备上加载巨大的桌面图片，然后替换为合适的图片（或者只是允许调整大小） .因此，在移动设备上，您以较慢的速度加载图像两次。这是一个福音。

这个想法是，在获取页面时，您可以预加载资源、CSS、图像等。在调用 DOM 时，它也可以调用 CSS 并开始加载它。过去，您会将所有 JS 放在页面底部以加快加载时间（不再是要求）。这是为了阻止这些资源阻塞渲染。但是你不能预加载背景图片，你必须先阅读 CSS，这更像是后加载。

为此，发明了srcset 和<picture>，它们可以在<img 标签上预加载正确的图像。当您调用 DOM 时，您可以同时开始下载 CSS 和图像。

EM 和 REM

现在...我们转到EMs 和REMs。这些是相对测量。要了解 EM，您需要父容器测量值，因为 EMs 与父容器相关。 REMs 与主体/默认测量有关。这意味着需要等待 CSS 加载才能理解这些度量/单位。

使用 HTTP2，我们可以同时加载更多资源，这意味着我们可以在获取 DOM 和 CSS 的同时开始下载图像。 <picture> 和 srcset 是导致这种情况发生的原因，但它不会知道在加载过程中的那个时候 EM 是什么，所以如果它猜到了，它可能会加载错误的图像，否则它会只是等到页面加载，所以再一次，我们没有预加载。所以这就是为什么你必须使用px。

我希望这是有道理的（我希望我的理解是正确的）

Answer 3

如有疑问，请查看CanIUse 了解支持哪些较新的 HTML5 元素。

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

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