铬移动设备屏幕仿真器

Question

我有点困惑于设备屏幕模拟是如何在chrome中工作的，以及如何使用它来编写负担得起的媒体查询。例如：

IPhone X
Real device screen-size: 1125x2436px    
Emulated device screen-size: 375x812px

我知道，像这样的分辨率很容易就需要两个全高清屏幕，以1:1的比例显示实际的显示器分辨率(像素密度)，但模拟分辨率并不仅仅是放大的结果，因为如果我放大或缩小视图，像素大小大致相同，这让我觉得铬是在建议我，模拟分辨率应该作为我的布局参考，就像它是真实的设备。

但如果是的话，如何计算这个决议呢？为什么我应该使用这个而不是实际的设备屏幕大小？

Answer 1

虽然手机屏幕通常像全高清或Quad那样高分辨率，但它们的浏览器视图不是，而是Chrome在开发工具中向您展示的分辨率。

这有助于您设置CSS媒体查询，因为您不必处理每个特定设备的每一个分辨率。

但如果是的话，如何计算这个决议呢？

它只是对给定设备的实际屏幕分辨率的缩小版本。

为什么我应该使用这个而不是实际的设备屏幕大小？

因为视口的实际分辨率是那个，而不是设备屏幕大小。

您可以在这里阅读更多关于这一点的信息：https://mediag.com/blog/popular-screen-resolutions-designing-for-all/