Question

我担心<picture>的行为srcset和<source>。我想加载不同的图片，具体取决于：

视网膜/非视网膜显示器
屏幕分辨率
webp格式支持

我编写的代码（仅适用于移动设备）：

    <picture>
      <source
        media="(max-width: 767px)"
        srcset="
          https://i.ibb.co/W6v8K6J/mob-2x-webp.png 2x,
          https://i.ibb.co/xzNtHnL/mob-webp.png    1x
        "
        type="image/webp"
      />
      <source
        media="(max-width: 767px)"
        srcset="
          https://i.ibb.co/DkyRD4z/mob-x2.png 2x,
          https://i.ibb.co/qC1JqMR/mob.png    1x
        "
        type="image/png"
      />
      <img src="" alt="Not mobile!" />
    </picture>

它可以工作，但是它始终会加载视网膜图像-也适用于非视网膜显示器。有人知道为什么吗？我该如何实现列出的所有要点？

链接到沙盒：https://codesandbox.io/s/relaxed-cloud-txynh

实时预览：https://txynh.csb.app/

<source>标签上的视网膜和非视网膜图像

0 个答案: