ios - <pic> 元素在 iOS 上出现意外行为

我正在使用<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 。

以前有人遇到过这种行为吗？难道是我遗漏了一些奇怪的视网膜东西？

最佳答案

好吧，我终于解决了这个问题!

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

关于ios - <pic> 元素在 iOS 上出现意外行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56679037/