响应式图片使用srcset/sizes在Safari iOS中无法正常显示。

Question

响应式图片使用srcset/sizes在Safari iOS中无法正常显示。

4

I have the following

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

这段代码在普通屏幕和高分辨率屏幕上均正常显示。

但是当视口非常小（小于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浏览器以220px的长度和110px的高度显示图像。

请问您能更正我的语法吗？

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

- George Katsanos

1

你用哪个iOS版本测试图像标记？你需要至少iOS 9才能使w描述符起作用。你可以在这里找到有关浏览器支持的详细信息：http://caniuse.com/#feat=srcset - ausi

部分谜团已经解开。我在测试中使用的是8.x模拟器...有什么备选方案或解决方法吗？ - George Katsanos

好的，我将110w作为第一个标志添加了进去，它被8.x识别了（如果它不理解“w”描述符，我猜这是基于顺序的），其余部分都正常工作。 - George Katsanos

如果需要，您可以使用Picturefill为较旧的浏览器添加支持。 - ausi

1

我看到了，想要避免使用polyfill，因为这不是一个图片密集的项目，小尺寸和回退src属性将适用于99.99%的情况:) - George Katsanos

是的，如今对于大多数用例来说，使用一个好的备用 src 应该已经足够了。 - ausi

2个回答

0

你也可以尝试使用更多的source，就像这样：

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

或者类似这样——我没有测试过，我需要更多地了解有关分辨率媒体查询的知识才能确定。

- thrnd

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ausi · Accepted Answer

你可以使用 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图像，在HiDPI小屏幕上则选择300w图像。

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