这是前端调试里非常常见的困惑，核心原因在于**设备像素比（Device Pixel Ratio，简称DPR）**的存在，下面我给你把这个逻辑掰明白：

两个关键像素概念的区别 #

首先得搞清楚两个容易混淆的像素定义：

• CSS像素：这是网页布局和样式中使用的逻辑像素，也是DevTools设备模拟面板显示的数值（比如你看到的Pixel 2 XL的412宽度）。它的作用是让网页内容在不同分辨率的屏幕上保持一致的视觉大小。
• 物理像素：这是屏幕硬件实际拥有的像素点数量，也就是你说的Pixel 2 XL的1440宽度，是屏幕制造时就固定的硬件参数。

设备像素比的作用 #

设备像素比的计算公式很简单：

DPR = 物理像素数 / CSS像素数

以Pixel 2 XL为例，它的DPR约为3.49（1440 ÷ 412 ≈ 3.49）。浏览器会自动根据这个比例，把CSS像素渲染到对应的物理像素上——这样做的目的是为了让高分辨率屏幕上的文字、图片不会因为像素太密集而显得过小，保证用户的视觉体验一致。

DevTools的模拟逻辑 #

Chrome DevTools的移动设备模拟功能，本质是模拟设备的CSS像素环境，而不是直接展示物理像素。因为对于前端开发者来说，我们写代码时用的是CSS像素（比如width: 100px），调试时自然需要以CSS像素为基准，这样才能直观看到布局在目标设备上的实际表现。如果直接显示物理像素，反而会让开发者对布局尺寸产生误解。

如何查看物理像素？ #

如果你确实需要查看设备的物理像素，可以通过两种方式：

• 在DevTools的设备模拟面板中，查看设备信息的“物理尺寸”字段；
• 在DevTools控制台中执行window.devicePixelRatio，得到当前模拟设备的DPR，再用DevTools显示的CSS像素尺寸乘以DPR，就能算出对应的物理像素数。

内容的提问来源于stack exchange，提问作者Johann