Question

我正在将<picture>元素与srcset配合使用，以针对不同的屏幕分辨率加载不同的图像。这是出于艺术指导的原因-我想要不同的形状-所以我需要使用<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。

有人以前遇到过这种行为吗？是我缺少的一些奇怪的视网膜东西吗？

Answer 1

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

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

缺少<picture>元素的支持仅使用min-width和max-width属性没有使用响应式测量来检测正确的视口尺寸后备广告（例如：使用50vw）

Answer 2

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

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

Answer 3

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

问题的解释如下：

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

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

一旦决定可以为移动设备提供明显更小的图片（和不同的形状）。但是随后您失去了图像的可访问性，并且并非所有图像都适合作为背景图像。

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

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

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

EM 和 REM

现在...我们进入 EM 和 REM。这些是相对测量。要了解 EM，您需要父容器度量，因为 EM 与父容器相关。 REM 与主体/默认测量值相关。这意味着需要等待 CSS 加载以了解这些度量/单位。

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

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

<picture>元素在iOS上具有意外行为

3 个答案: