DevTools中的屏幕尺寸与实际设备尺寸不匹配

Question

在Chrome的DevTools中，当我选择一个移动设备来显示网页时，我注意到DevTools中的屏幕尺寸与设备的实际屏幕分辨率不匹配。例如，如果我选择一个像素2 XL, DevTools显示的宽度是412。但这个设备的宽度实际上是1440英寸。这有什么原因吗?

Answer 1

这是因为Pixel 2 XL的像素密度为3.5，所以设备分辨率为1440 x 2880 px，而CSS分辨率为412 x 823 px ((1440/3.5) x (2880/3.5))

像素没有固有的大小。它在显示或打印时获得一个。

你可以在这里阅读更多关于设备和CSS分辨率之间的差异。

你可以在这里找到许多设备的设备和CSS分辨率。