HTML img srcset/size 在 iPhone 4S 上不起作用答案

【问题标题】：HTML img srcset/size not working on iPhone 4SHTML img srcset/size 在 iPhone 4S 上不起作用
【发布时间】：2014-12-01 00:10:55
【问题描述】：

我根据 Eric Portis 的优秀文章“Srcset and sizes”创建了一个网页，但它在我的 iPhone 4s 上无法正常工作。据我了解，4s 的宽度为 320 个虚拟（或 CSS）像素，但由于 4S 具有 Retina 显示屏，这实际上转化为 640（= 2 x 320）个虚拟像素。当我在我的 iPhone（纵向模式）上查看下面显示的代码时，我看到两行“大”图像，两行中的每一行中的每个图像都占据了视口宽度的三分之一。我认为这是不对的。

如果我正确理解了我的 img 大小属性，则表示如果浏览器看到视口的最小宽度为 768 像素，则每个图像应占视口宽度的 1/3。否则占100%：

sizes='(min-width: 768px) 33.3vw, 100vw'

但由于我的 iPhone 视口的宽度是 640 像素，我不应该在每行看到一张图像，每张图像占据视口的整个宽度吗？

如您所见，我正在使用 Scott Jehl 的图片填充 polyfill，这样浏览器就不会默认使用 src 属性中的图像 URL。我的小、中、大图像的宽度分别为 100、200 和 300 像素。谁能解释我做错了什么？

感谢您的帮助！

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Test Srcset/Sizes</title>
    <style type="text/css">
        * { box-sizing: border-box; }
        body, figure { margin: 0; }
        img { display: block; width: 100%; }
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        h1 {
            font-family: Arial;
            font-size: 2em;
            margin: 0.5em;
            text-align: center;

        }
        figure {
            padding: 1px;
        }
        @media (min-width: 768px) {
            figure {
                display: block;
                float: left;
                width: 33.3333333333333%;
            }
        }
    </style>
    <script>
    document.createElement("picture");
    </script>
    <script src="../js/picturefill.min.js" async></script>
</head>

<body>
    <h1>Srcset and Sizes</h1>
    <main>
    <figure>
        <img src='img/mine/small-1.jpg' 
             srcset='img/mine/large-1.jpg 300w,
                     img/mine/medium-1.jpg 200w,
                     img/mine/small-1.jpg 100w'
             sizes='(min-width: 768px) 33.3vw,
                    100vw'
             alt="Image 1" />
    </figure><!--

    --><figure>
        <img src='img/mine/small-2.jpg' 
             srcset='img/mine/large-2.jpg 300w,
                     img/mine/medium-2.jpg 200w,
                     img/mine/small-2.jpg 100w'
             sizes='(min-width: 768px) 33.3vw,
                    100vw'
             alt="Image 2" />
    </figure><!--

    --><figure>
        <img src='img/mine/small-3.jpg' 
             srcset='img/mine/large-3.jpg 300w,
                     img/mine/medium-3.jpg 200w,
                     img/mine/small-3.jpg 100w'
             sizes='(min-width: 768px) 33.3vw,
                    100vw'
             alt="Image 3" />
    </figure><!--

    --><figure>
        <img src='img/mine/small-4.jpg' 
             srcset='img/mine/large-4.jpg 300w,
                     img/mine/medium-4.jpg 200w,
                     img/mine/small-4.jpg 100w'
             sizes='(min-width: 768px) 33.3vw,
                    100vw'
             alt="Image 4" />
    </figure><!--

    --><figure>
        <img src='img/mine/small-5.jpg' 
             srcset='img/mine/large-5.jpg 300w,
                     img/mine/medium-5.jpg 200w,
                     img/mine/small-5.jpg 100w'
             sizes='(min-width: 768px) 33.3vw,
                    100vw'
             alt="Image 5" />
    </figure><!--

    --><figure>
        <img src='img/mine/small-6.jpg' 
             srcset='img/mine/large-6.jpg 300w,
                     img/mine/medium-6.jpg 200w,
                     img/mine/small-6.jpg 100w'
             sizes='(min-width: 768px) 33.3vw,
                    100vw'
             alt="Image 6" />
    </figure>
</main>
</body>
</html>

【问题讨论】：

标签： html css media-queries

【解决方案1】：

Safari 不支持sizes，也不支持srcset 的w 描述符。 WebKit nightlies 支持它，但就测试显示而言，它并没有在 Safari 分支中打开。

您的示例在 Chrome 38 AFAICT 中运行良好。

【讨论】：

【解决方案2】：

我认为您的问题可能是您使用的是最小宽度。在媒体查询中使用 min-width 时，您是在告诉浏览器在浏览器窗口大于以下值时应用以下样式。我相信如果你在这种情况下使用 max-width，你会得到想要的结果。

这里是an article，以获取有关此主题的更多信息。

【讨论】：

我不认为使用 min-width 是问题。 size 属性表示如果宽度 >= 768，则显示三个图像，每个图像的宽度为屏幕宽度的 33.3%。但即使宽度小于 768，它也会这样做。
啊，我想我之前误解了。我也有点懒，没有花时间阅读您第一次链接到的文章。话虽如此，我不确定为什么这在您手机的浏览器中不起作用。它在这里工作正常：jsfiddle.net/ctgunn/hzfLhuL1。同样根据这一点，我认为应该支持它，除非您手机上的浏览器不是最新的。 caniuse.com/#search=srcset。希望这会有所帮助。