css - srcset - 响应图像加载错误文件

Question

我的目标是为同一图像提供不同版本(分辨率/尺寸)，它应该占据视口(viewport)宽度的 100%，因此我可以为移动设备(或者通常是显示器更小或更慢的设备)提供 800px 版本连接)，1366px 及以上到更大的桌面显示器。

问题是我正在使用 Chromium 设备模拟器对其进行测试，并且一些小屏幕设备加载 1366px 版本而不是 800px:iPhone 6/7/8(375px 宽度)加载 800px 图像，但 iPad(768px) , Nexus 5 (360px) 和 iPhoneX (375px) 都加载 1366px 而不是加载 800px。

我对正确理解 size 指令不是很有信心，这是我的代码，默认 src 引用 2880px 版本只是为了帮助测试:

<img class="img-fluid" 
    srcset="img/dreamstime_800w_109635242.jpg 800w,
         img/dreamstime_1366w_109635242.jpg 1366w,
         img/dreamstime_2880w_109635242.jpg 2880w"
    sizes="(max-width: 800px) 100vw,
        (max-width: 1366px) 100vw,                      
        2880px 100vw"
    src="img/dreamstime_2880w_109635242.jpg"/>

Answer 1

这与视网膜显示器(以及它们的 DPI，我认为)有关。

据我所知，视网膜显示器会根据各自的视网膜显示器(2x、3x 等)选择两倍或三倍于其显示器宽度的第一张图像。

另一个简单的解决方案是清除浏览器缓存。如果您最大和最差的图像已经被缓存，Chrome(例如)将始终加载该图像。