在Chrome的DevTools中，当我选择一个移动设备以显示网页时，我注意到DevTools中的屏幕大小与设备的实际屏幕分辨率不符。例如，如果我选择...

Question

是因为像素2 XL的像素密度为3.5，因此，当设备的设备分辨率为1440 x 2880 px时，CSS分辨率为412 x 823 PX（（（1440 / 3.5））（（1440 / 3.5）x（2880 / 3.5）） A像素没有固有的大小。它在显示或打印时获得一个。 您可以阅读有关设备和CSS分辨率之间差异的更多信息。 您可以找到许多设备的设备和CSS分辨率

Herey。

Answer 1

不同的设备每英寸具有不同数量的像素。如果在设备像素中给出CSS尺寸，则英寸将非常不同。为了与像素密度较低的旧时代的兼容性，并且在像素中给出了相似的设备和CSS尺寸，CSS尚未丢弃其像素单元，但已将其预期的含义更改为所谓的Reperence

referencePixel

。从28英寸远的地方观察时，参考像素应对应于约0.0213度的视觉角度。但是，由于几个原因，（忠实于px和

cm

）的CSS单位并非如此： 通常，浏览器不知道台式机/笔记本电脑屏幕的大小。您可以插入任何尺寸的监视器，并且不知道。

大多数移动设备告诉浏览器一个不正确的

Answer 2

（设备像素和参考像素的大小之间的比率），因此参考像素大小与规范略有不同（对于某些设备而言）。

用户可以通过更改“设备比例因子”（例如在windows上的

display设置

- >

Scale

），在Windows上，使用标志等标志来进一步偏见，或使用ctrl+++

+

或

Ctrl

+鼠标+鼠标。

用户可以在触摸屏或触摸板上捏缩质。

• 匹配设备尺寸
• 现在，您可能需要通过两种方法来模拟另一种设备的大小：
设备像素的标题数量
• 使屏幕截图具有相同的大小和像素相似：查找模拟设备的设备像素的数量并匹配它。 Probably the

  devicePixelRatio

  s of your device and/or of the simulated device should be taken into account in order to undo the browser's handling of the devicePixelRatio of your device (which it might perform even during a DevTools device simulation - I haven't checked whether it does nor whether DevTools are ideal for this) and/or simulate the browser's handling of the --force-device-scale-factor=4 of the simulated device.

  以英寸为单位的物理尺寸：考虑屏幕的蛋白尺寸。
  

  我们稍后可以在此处添加详细信息。无论如何，DevTools似乎都没有做两个。