Srcset 屬性在移動設備和 Chrome 開發工具中的移動設備視圖中無法正常工作

Question

鑒於以下情況：

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<img
  src="https://www.bennet.org/blog/responsive-images-busy-people/images/curiosity-medium.jpg"
  alt="Mars Curiosity Rover takes an excellent selfie."
  srcset="
    https://www.bennet.org/blog/responsive-images-busy-people/images/curiosity-large.jpg 1120w,
    https://www.bennet.org/blog/responsive-images-busy-people/images/curiosity-medium.jpg 720w,
    https://www.bennet.org/blog/responsive-images-busy-people/images/curiosity-small.jpg 400w"
  sizes="(max-width: 400px) 400px, (max-width: 720px) 720px, (max-width: 1120px) 1120px"
>
</body>
</html>

當在視口寬度分別為 400px、720px 和 1120px 的設備上查看時，我希望瀏覽器選擇的圖像是小的、中的然后是大的。 這確實是在桌面瀏覽器中測試時的行為（拖動 window，刷新頁面），但是在使用真實移動設備（iOS 14+）查看頁面時情況並非如此。 我還在設備工具欄中使用 Chrome DevTools 對此進行了測試。 相反，在所有情況下都會加載最大的圖像。 我檢查了控制台中的視口寬度，如下圖所示。

在移動設備上查看時以及使用 Chrome DevTools 設備工具欄時的圖像。

在桌面版 Chrome 中查看時的圖像，只需調整 window 的大小即可。

我對srcset的理解有誤嗎？ 其他地方會不會有什么問題？

Answer 1

您需要注意像素密度比。 Iphone 具有像素密度比為 2 倍的視網膜顯示屏（因此 1200 像素的圖像用於 600 像素的寬度）。

結帳如何將 srcset 和大小用於響應式圖像

Srcset 屬性在移動設備和 Chrome 開發工具中的移動設備視圖中無法正常工作

問題描述

1 個解決方案

解決方案1
0 2021-08-16 16:28:49

Srcset 屬性在移動設備和 Chrome 開發工具中的移動設備視圖中無法正常工作

問題描述

1 個解決方案

解決方案1 0 2021-08-16 16:28:49

解決方案1
0 2021-08-16 16:28:49