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