不能在Chrome / Firefox开发工具中模拟设备像素比率吗？

问题描述

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

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

我的显示器是否需要支持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">

解决方法

我相信您正在寻找

body {
  background: #dddddd;
}

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

我认为就是这样吗？它会按比例放大照片，以防止其按比例放大，您必须使用max-width / max-height并将其设置为您要在％tage切断之前所要达到的最大值。