Chrome/Firefox 开发工具中没有模拟设备像素比？

Question

我一直在使用 Chrome 和 Firefox 开发工具测试不同的 DPR，看来更改 DPR 对最终渲染没有明显影响。

我尝试了多个测试用例，包括真实照片和插图。我确保我使用的图像的分辨率明显低于在 2x 或 3x 显示器上呈现的分辨率。请参阅下面的示例并使用 Chrome 或 Firefox 开发工具中的响应工具来更改 DPR。我在 CSS 中将图像的宽度设置为500px。图像的固有分辨率为 520 x 720 像素。所以在@3x 设备上，它应该将该图像缩放到 1500 像素宽，使其看起来模糊。

我的显示器是否需要支持 3.0 像素比率才能进行模拟？

body {
  background: #dddddd;
}

img {
  width: 500px;
  height: auto;
}

<img src="https://cdn.pixabay.com/photo/2013/07/13/11/34/apple-158419_960_720.png" alt="Red apple">

Answer 1

我相信你正在寻找

body {
  background: #dddddd;
}

img {
  width: 100%;
  height: auto;
}

我想是这样吗？它会放大照片，要阻止它放大，您必须使用 max-width/max-height 并将其设置为您希望它在 %tage 自行关闭之前达到的最高值。