问题描述
我正在尝试构建一个 UI，以便更轻松地定义和处理响应式图像。 UI 在 iframe 中加载同域页面，以便具有与 Chrome 的 devtools 的设备模式下的响应模式有些类似的调整大小功能。也就是我有一个句柄，可以用来调整iframe的大小，对应改变iframe中加载的页面的视口宽度。
它完全符合基于 CSS 的媒体查询的预期，因为它们在调整 iframe 大小时以像素精度生效。
但是，图像是另一回事。例如，我有一个尺寸为：300px、768px 和 1024px 的图片。如果只是定义了 srcset 而没有定义大小属性，我希望浏览器在宽度超过 300 像素时立即加载 768 像素的图像，并且在宽度超过 768 像素时立即加载 1024 像素。这不是我通过 UI 调整大小时看到的。相反，在宽度超过 434 像素之前使用 300 像素的图像，而在宽度超过 802 像素之前使用 768 像素。所以，在这两种情况下，它甚至没有相同的因素。
如果不是在 iframe 中加载页面，而是在浏览器中加载页面并在开发人员工具中进入设备模式，那么当设备像素比设置为 1.0 时，发生的变化完全符合我的预期。这告诉我浏览器（在本例中为 Chrome）正在执行一些可能与其感知/计算出的设备像素比率相关的计算。
在我使用 window.devicePixelRatio 的计算机上返回 1.1。我尝试使用 this short post 中描述的方法进行调整，但这并没有让我更接近解决方案。事情似乎很可疑，正如我上面提到的，这两个班次并没有因同一个因素而有所不同，所以这不仅仅是调整比率的问题 - 据我所知。
解决这个问题会很棒：有什么方法可以强制 Chrome（最好是其他浏览器）将页面呈现为好像 DPR 为 1 - 就像它在开发人员工具中主动设置为 1 时所做的那样这样做？谢谢
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）