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屏幕上工作正常.

但是当视口非常小(低于400px)时,徽标不适合,因此我需要在实际长度方面使用较小版本的图像,这是我创建的.然后我试了一下

            <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图像 - 但现在我已经失去了"高分辨率"因素; 我不能强迫iphone5s中的iOS浏览器使用上述语法显示长度为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
">

现在浏览器知道它可以从三个150,300和600像素宽的图像中进行选择(我猜测尺寸,你的实际宽度可能会有所不同).

其次,您告诉浏览器图像在网页中显示的大小,这可以通过以下方式实现sizes:

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

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

这足以让浏览器选择正确的图像.在普通屏幕的普通桌面上,它将选择300w-image,在HiDPI桌面上它将是600w一个.在具有普通屏幕的小视口上,150w将选择并在具有HiDPI的小视口上进行选择300w.

如果您想了解更多的信息srcset和sizes,看看http://ericportis.com/posts/2014/srcset-sizes/.