我正在尝试构建一个 UI，以使响应图像的定义和处理更容易一些。UI 在 iframe 中加载同域页面，以便具有类似于 Chrome 开发工具的设备模式下的响应模式的调整大小功能。也就是说，我有一个句柄，可以用来调整iframe的大小，对应于改变iframe中加载的页面的视口宽度。
它与基于 CSS 的媒体查询的预期完全一样，因为这些查询在调整 iframe 大小时会以像素精度生效。
但是，对于图像，情况就不同了。例如，我有一个尺寸为：300px、768px 和 1024px的图像。如果只定义了 srcset 而没有定义 sizes 属性，我希望浏览器在宽度超过 300 像素时加载 768 像素的图像，一旦超过 768 像素就加载 1024 像素。这不是我通过 UI 调整大小时看到的。相反，使用 300 像素的图像直到宽度超过 434 像素，使用 768 像素的图像直到超过 802 像素。因此，在这两种情况下，它甚至没有相同的因素不同。
如果我不是在 iframe 中加载页面，而是在浏览器中加载它并在开发人员工具中进入设备模式，那么当设备像素比设置为 1.0 时，这些变化完全符合我的预期。这告诉我浏览器（在本例中为 Chrome）正在执行一些可能与其感知/计算的设备像素比相关的计算。
在我工作的计算机上window.devicePixelRatio返回 1.1。我尝试使用这篇短文中描述的方法进行调整，但这并没有让我更接近解决方案。事情看起来很可疑，正如我上面提到的，这两个班次并没有因同一因素而有所不同，所以这不仅仅是调整比例的问题——据我所知。
有一个解决方案会很棒：有什么方法可以强制 Chrome（和其他浏览器最好）像 DPR 为 1 一样呈现页面 - 就像它在开发人员工具中主动设置时所做的那样？谢谢