Chrome 移动设备屏幕模拟器答案

【问题标题】：Chrome mobile device screen emulatorChrome 移动设备屏幕模拟器
【发布时间】：2019-12-24 12:40:31
【问题描述】：

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

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

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

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

【问题讨论】：

【解决方案1】：

虽然手机屏幕通常像 Full HD 或 Quad HD 那样具有高分辨率，但它们的浏览器视口却不是，而是 Chrome 在开发者工具中向您显示的分辨率。

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

但是如果是的话，这个分辨率是怎么计算出来的呢？

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

为什么我应该使用它而不是实际的设备屏幕尺寸？

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

【讨论】：