HTML img srcset/size不适用于iPhone 4S
我根据Eric Portis的优秀文章“Srcset和sizes”创建了一个网页，但它在我的iPhone 4s上无法正常工作。据我所知，4s有320个虚拟（或CSS）像素宽，但由于4s有视网膜显示器，这实际上转化为640（=2 x 320）个虚拟像素。当我在iPhone上查看下面显示的代码时（在纵向模式下），我看到两行“大”图像，每行中的每个图像占据视口宽度的三分之一。我认为这是不对的。
如果我正确理解了img size attibute，这意味着如果浏览器看到视口的最小宽度为768像素，则每个图像应占据视口宽度的1/3。否则，占100%：
sizes='(min-width: 768px) 33.3vw, 100vw'
但是，既然我的iPhone视口的宽度是640像素，那么我不应该每行看到一张图像，而每张图像占据整个视口的宽度吗？
如您所见，我使用的是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>
共有2个答案
我想你的问题可能是你使用了最小宽度。在媒体查询中使用“最小宽度”时，当浏览器窗口大于以下值时，您告诉浏览器应用以下样式。我相信如果你在这种情况下使用最大宽度，你会得到想要的结果。
这里有一篇关于这个话题的文章。
Safari不支持大小，也不支持srcset的w描述符。WebKit nightlies支持它，但据测试显示，Safari分支并没有启用它。
您的示例在Chrome38 AFAICT中运行良好。
-
问题内容： 嗨，我只是简单地尝试在www.example.com上获取h1标签，该标签显示为“ Example Domain”。该代码适用于http://www.example.com，但不适用于https://www.exmaple.com。我该如何解决这个问题？谢谢 问题答案： PhantomJSDriver不支持（所有）DesiredCapabilities。 你会需要： 记录在这里：htt
-
所以我使用这种方法写入文件，它在windows上运行完全正常，但在mac上运行时，它会创建文件，但它们是空的。 我知道数据是正确的，因为它打印正确。感谢您的任何帮助，这真的让我绊倒了。
-
列名称的类型为int[] 上述查询适用于postgresql，但不适用于hsqldb，甚至适用于sql 尝试的hsqldb版本：2.2.9和2.3.0 在hsqldb中工作的sql是从table_name中选择x，unnest（column_name）y（x）x和y不是该表的列。
-
我能够成功地打电话给邮递员： /mfp/api/az/v1/token和 /mfpadmin/management-apis/2.0/runtimes/mfp/applications 我正在获取从/mfp/api/az/v1/token接收的承载令牌，并将其添加到/mfp/applications的授权标头中。 我收到了来自两者的200个响应，并从每个API中获取了预期的信息。 然后，我选择从P
-
我一直在使用声纳3.2 同样的配置，当我升级到SonarQube 4.4时 声纳项目属性: 请帮助整理这些例外 问候， KP
-
我已经看过并尝试了几乎所有关于这个话题的其他帖子，但运气不好。 我使用的是python 3.6，所以我使用的是以下AMI