我根据 Eric Portis 的优秀文章“Srcset and sizes”创建了一个网页，但它在我的 iPhone 4s 上无法正常工作。据我了解，4s 是 320 虚拟(或 CSS)像素宽，但由于 4S 具有 Retina 显示屏，这实际上转换为 640(= 2 x 320)虚拟像素。当我在我的 iPhone 上(纵向模式)查看下面显示的代码时，我看到两行“大”图像，两行中的每一行中的每个图像都占据了视口(viewport)宽度的三分之一。我认为这是不对的。
如果我正确理解我的 img 大小属性，意思是如果浏览器发现视口(viewport)的最小宽度为 768 像素，则每个图像应占据视口(viewport)宽度的 1/3。否则占100%:
sizes='(min-width: 768px) 33.3vw, 100vw'
但是由于我的 iPhone 视口(viewport)的宽度是 640 像素，我不应该每行看到一张图像并且每张图像都占据视口(viewport)的整个宽度吗？
如您所见，我正在使用 Scott Jehl 的 picturefill 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>
最佳答案
Safari 不支持sizes，也不支持srcset 的w 描述符。
WebKit nightlies 支持它，但就测试显示而言，它并未在 Safari 分支中启用。
您的示例在 Chrome 38 AFAICT 中运行良好。
关于HTML img srcset/size 不适用于 iPhone 4S，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26221225/