html – Safari iOS不支持使用srcset / sizes的响应式图像

我有以下内容

<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">

解决方法

你可以使用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像素宽的图像中进行选择(我猜测尺寸,你的实际宽度可能会有所不同).

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

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

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

这足以让浏览器选择正确的图像.在具有普通屏幕的普通桌面上,它将选择300w图像,在hidpi桌面上,它将是600w图像.在具有正常屏幕的小视口上,150w将被选中并且在具有300w的hidpi的小视口上.

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