惰性大小仅适用于设备宽度。不用于设备高度

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宽度的图像。我认为它正在为实际设备提供最大价值。同样在陆地空间模式（宽度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> 

但是我认为使用Picture标签似乎不太好...

如果有任何建议，请让我知道谢谢：）

Answer 1

iOS浏览器的行为在这里可能是正确的-由于它具有更高的密度显示屏（视网膜），因此它会拉出更大/更宽的图像，而对于这种情况，则需要具有更大分辨率（2倍甚至3倍的图像资源，具体取决于苹果手机）。这也可以与其他浏览器实现相媲美。