Chrome 移动设备屏幕模拟器

Question

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

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

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

但如果是，这个分辨率是怎么计算出来的？为什么我应该使用它而不是实际的设备屏幕尺寸？

Answer 1

虽然 phone 屏幕通常是全高清或四倍高清等高分辨率，但它们的浏览器视口不是，而是 Chrome 在开发者工具中显示的分辨率。

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

But if it is, how this resolution is calculated?

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

Why I should use this instead of the actual device screen-size?

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

Chrome mobile device screen emulator