如何在视网膜手机上显示 <picture> 的 2x 图像？答案

【问题标题】：How to show <picture>'s 2x image on retina mobile?如何在视网膜手机上显示 <picture> 的 2x 图像？
【发布时间】：2018-12-17 05:25:12
【问题描述】：

我正在尝试使用 <picture> 并根据屏幕显示 1x 或 2x 图像。

<picture class="general-info__photo">
        <source srcset="images/me2x.png" media="
                    only screen and ( min-resolution: 200dpi),
                    only screen and ( min-resolution: 1.25dppx)">
        <img src="images/me1x.png" alt="my photo">
    </picture>

它适用于我的视网膜 macbook，但我在 iphone 5s 上看到 1x 图像。如何解决这个问题？

【问题讨论】：

标签： html

【解决方案1】：

试试这个：

<picture>
  <source media="(min-width: 650px)" srcset="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSeP5nKHpuyus4LcJwBHjR2aDC6m28FSD9e-5dCu2Kl7rglEpVflQ">
  <source media="(min-width: 465px)" srcset="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTsPqgViwHdLlxPgRl6uC1NCe5t8jxyq9-m1gM6S3b6yy6jrqLa">
  <img src="https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Flowers" style="width:auto;">
</picture>

【讨论】：

【解决方案2】：

使用 wflag 我们可以告诉浏览器我们有不同宽度的相同图像。宽度类似于在媒体查询中使用max-width CSS 属性。

<img
  src="/images/me2x.png"
  alt="my photo"
  srcset="/images/me2x-medium.png 1024w,
               /images/me2x-large.png 2048w,
               /images/me2x.png 800w"
/>

【讨论】：

谢谢，工作。但是 w3 验证器说错误：当 srcset 属性有任何带有宽度描述符的图像候选字符串时，sizes 属性也必须存在。
@user2950602 在这里查看更新stackoverflow.com/questions/29788868/w3c-validation-of-srcset，希望它现在可以解决错误:)

【解决方案3】：

<picture class="general-info__photo">
            <img sizes="160px"
                 src="images/me.png"
                 alt="my photo"
                 srcset="images/me2x.png 320w, images/me.png 160w"
            />
        </picture>

【讨论】：