我正在使用 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。
我只能假设其他浏览器/设备也有类似的问题，但我无法在这些设备上进行测试。我希望如果我在这个浏览器/设备上解决了这个问题，那么它也“应该”在其他浏览器/设备上得到修复......
如何让 Android 上的 Chrome 加载正确的图片元素？
[编辑]
我还实现了 PictureFill看看是否有帮助。它没有。
最佳答案
我相信您遇到了 browser bug (对于那个很抱歉 :/)。它应该在 Chrome 46 中得到修复，目前处于 beta channel 。
能否请您使用 Chrome Beta 进行测试并确认它确实为您解决了该问题？
关于android - 图片标签在 Android 版 Chrome 上使用了错误的来源，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32841724/