Safari iOS 不支持使用 srcset/sizes 的响应式图片

Question

我有以下

        <img
            src="/img/footer/logo_white.png?v=2.0"
            srcset="/img/footer/logo_white.png?v=2.0 1x,
                    /img/footer/logo_white2x.png?v=2.0 2x"
        >

在普通和 hiDPI 屏幕上工作正常。

但是当视口非常小（低于 400 像素）时，徽标不适合因此我需要我创建的实际长度图像的较小版本。然后我试了

            <img
                class="biw-logo"
                sizes="(max-width: 390px) 110px, 175px"
                src="/img/footer/biw_logo.png?v=2.0"
                srcset="/img/footer/biw_logo_small.png?v=2.0 110w,
                        /img/footer/biw_logo.png?v=2.0 175w,
                        /img/footer/biw_logo2x.png?v=2.0 350w"
            >

在显示低于 390 像素的视口的 _small 图像方面有效 - 但现在我失去了 "high resolution" 因素；我无法用上述语法强制iOS iphone5s 中的浏览器显示长度为110px 的220px 图片。

你能纠正我的语法吗？

<img class="biw-logo" sizes="(max-width: 390px) 110px, 175px" src="http://placehold.it/175x75" srcset="http://placehold.it/110x50 110w,
http://placehold.it/175x75 175w, http://placehold.it/350x150 350w">

Answer 1

您可以使用 srcset 和 sizes 来做到这一点。首先告诉浏览器你有哪些可用的图像以及这些图像有多少像素宽，这可以通过 srcset:

来完成

<img srcset="
    /img/footer/logo_white.png?v=2.0 300w,
    /img/footer/logo_white2x.png?v=2.0 600w,
    /img/footer/logo_white_small.png?v=2.0 150w
">

现在浏览器知道它可以 select 从三个 150、300 和 600 像素宽的图像（我猜的尺寸，你的实际宽度可能不同）。

其次，你告诉浏览器在网页中显示图片的大小，这可以通过sizes来实现：

<img
    sizes="(max-width: 400px) 150px, 300px"
    srcset="..."
>

浏览器现在知道，如果视口的宽度为 400px 或更小，图像将显示 150px 宽，对于大于 400px 的视口，图像将显示 300px 宽。

这些信息足以让浏览器 select 显示正确的图像。在具有普通屏幕的普通桌面上，它将 select 300w 图像，而在 HiDPI 桌面上，它将是 600w 图像。在具有普通屏幕的小视口上，150w 将得到 selected，而在具有 HiDPI 的小视口上，300w 将得到

。

如果您想了解有关 srcset 和 sizes 的更多信息，请查看 http://ericportis.com/posts/2014/srcset-sizes/。

Answer 2

您也可以尝试使用更多的 sources：

<picture>
    <source srcset="img.png"    media="(resolution: 150dpi)" type="image/png" />
    <source srcset="img2x.png"  media="(resolution: 300dpi)" type="image/png" />
    <img src="img.png" alt="alt text" />
</picture>

或类似的东西 - 我没有测试它，我需要了解更多关于 resolution 媒体查询的信息才能确定。

Safari iOS 不支持使用 srcset/sizes 的响应式图片

Responsive images using srcset/sizes isn't respected by Safari iOS

html

css

srcset

responsive-images