lazysizes 只需要为设备宽度工作。不适用于设备高度

Question

我有问题 https://github.com/aFarkas/lazysizes

<img class="figure-image lazyload"
    src="{{ image.src|resizeDynamic(800) }}"
    srcset="{{ placeholderImage(800, 800 / image.aspect) }}"
    data-srcset="
      {{ image.src|resizeDynamic(1920) }} 1920w,
      {{ image.src|resizeDynamic(1440) }} 1440w,
      {{ image.src|resizeDynamic(1320) }} 1320w,
      {{ image.src|resizeDynamic(1024) }} 1024w,
      {{ image.src|resizeDynamic(800) }} 800w,
      {{ image.src|resizeDynamic(600) }} 600w,
      {{ image.src|resizeDynamic(375) }} 375w"
    data-sizes="auto"
    alt="{{ image.alt|e }}">

在浏览器上，上图仅适用于宽度。但在移动设备上，它正在考虑设备宽度和设备高度的最大值。

例如，iPhoneX 的尺寸为 375 x 812。但在纵向模式下（宽度 375px），图像正在拉动 for {{ image.src|resizeDynamic(1024) }} 1024w. ， 不拉动 375px 宽度的图像。我认为它正在为真实设备创造最大价值。同样在 landspace 模式下（宽度 812px），图像正在拉取 {{ image.src|resizeDynamic(1920) }} 1920w,

这是很奇怪的事情。我附上了关于我的问题的图片。

但我想像 PC 一样考虑设备的宽度。

我在谷歌上搜索这个东西。它推荐我像下面的图片标签

<picture>
    <source data-srcset="assets/imgs/6.jpg" media="(max-width: 500px)" />
    <source data-srcset="assets/imgs/7.jpg" media="(max-width: 1024px)" />
    <source data-srcset="assets/imgs/9.jpg" />
    <img
        class="lazyload"
        data-src="assets/imgs/8.jpg"
        alt="image with artdirection" />
</picture>

不过我觉得用图片标签好像不太好...

如有任何建议，请告诉我谢谢:)

Answer 1

iOS 浏览器的行为在这里可能是正确的 - 它正在拉动更大/更宽的图像，因为它具有更高的密度显示（视网膜），并且需要具有更大分辨率的图像资产（ 2 倍甚至 3 倍，具体取决于 iPhone）。这也可以与其他浏览器实现相媲美。

lazysizes 只需要为设备宽度工作。不适用于设备高度

lazysizes need to work for only device width. not for device height

html

javascript

css

lazy-loading

responsive