【发布时间】：2015-12-26 19:13:20
【问题描述】：
我正在使用html5图片标签来加载合适的图片：
<picture>
<source srcset="/path/to/image-450x450.jpg" media="(min-width:768px)">
<source srcset="/path/to/image-600x600.jpg" media="(min-width:600px)">
<source srcset="/path/to/image-450x450.jpg" media="(min-width:450px)">
<img src="/path/to/image-224x224.jpg" alt="Alt text here">
</picture>
在我的电脑上，这会加载第一个 source 图像。在我的平板电脑上，它正在加载第二个 source 图像，然后是第一个 source 图像。
我已将我的平板电脑以开发者模式插入我的电脑，以便我可以检查元素并从我的电脑查看网络选项卡。
这就是我了解到平板电脑首先加载大图像，然后是正确图像的方式。
我已经读到浏览器将应用第一个匹配的media 属性的source。
令人沮丧的是，我在其他页面上有picture 元素并且它们正在正确加载图像，那么为什么这个会以不同的方式做呢？我该如何解决？
我已将媒体查询更改为不同的值，但浏览器似乎在第一次传递时忽略了它。
我已经禁用了 javascript，以防插件受到指责。
我认为浏览器可能正在预取第二张图片，因为屏幕高度低于 600 像素，所以我发出了$(window).width() 的警报，它是 800 像素，所以这也不是答案。
我在运行 android 4.2.2 的 Galaxy Tab 2 上使用 Chrome 45.0.2454.94。
我只能假设其他浏览器/设备也存在类似问题，但我无法在这些设备上进行测试。我希望如果我在这个浏览器/设备上解决了这个问题，那么它“应该”在其他浏览器/设备上也得到解决......
如何让 chrome on android 加载正确的图片元素？
[编辑]
我还实现了PictureFill，看看是否有帮助。它没有。
【问题讨论】：
-
编辑建议：您可以添加
responsive-design标签。 （我们真的应该有一些特定的picture-element或responsive-images在 SO 标记，但我猜缺少responsive-design是人们一直在使用的。） -
你有两次 450x450；我假设第一个打算更大？
-
你使用
<meta name=viewport>吗？如果使用，它说明了什么？ -
我的视口标签是：
<meta name="viewport" content="width=device-width, initial-scale=1">。图片尺寸正确，因为布局在浏览器宽度之间发生变化。 -
如果窗口宽度为800px，则三个媒体查询都为真。添加
and (max-width:...)怎么样
标签： android css html google-chrome responsive-design