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

Question

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

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

我不太有信心正确理解尺寸指令，这是我的代码，默认 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

您的sizes属性告诉浏览器图像始终显示完整视口宽度，因此您只需将其替换为sizes="100vw".

\n\n

因此，浏览器获取当前视口宽度，将其乘以屏幕密度，然后得到所需图像的宽度。然后，它从 .txt 文件中的列表中获取最接近的图像srcset。

\n\n

您不能使用它来\xe2\x80\x9d向移动设备\xe2\x80\x9d提供800px版本，因为现在大多数移动设备的密度比桌面设备更大，并且您无法使用<img srcset\xe2\x80\xa6 sizes\xe2\x80\xa6>.

\n\n

如果您确实想忽略屏幕密度（出于什么原因？）并且：

\n\n

\n
• 向小型设备提供最小的图像，
\n
• 为中型设备提供中型图像
\n
• 向大型设备提供大图像
\n
• 保留最大的图像作为后备
\n

\n\n

然后你必须使用<picture>这样的媒体查询：

\n\n

html\n<picture>\n <source media="(max-width: 800px)" srcset="img/dreamstime_800w_109635242.jpg 800w">\n <source media="(max-width: 1366px)" srcset="img/dreamstime_1366w_109635242.jpg 1366w">\n <img src="img/dreamstime_2880w_109635242.jpg">\n</picture>\n

\n

Answer 2

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

据我所知，视网膜显示器将选择其显示器宽度两倍或三倍的第一张图像，具体取决于其各自的视网膜显示器（2x、3x 等）。

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