为什么CSS响应式设计中不推荐使用物理像素_理解逻辑像素差异

iPhone上1px边框更粗是因为其devicePixelRatio（DPR）为2或3，1个CSS像素对应2或3个物理像素；而多数中低端安卓机DPR=1，1px即1物理像素，故视觉更细。

为什么 1px 在 iPhone 上看起来比安卓手机粗？

这不是 CSS 写错了，而是浏览器把 1px 解释成了不同数量的物理像素。iPhone 的 window.devicePixelRatio 多为 2 或 3，意味着 1 个 CSS 像素要铺满 4 或 9 个物理像素；而很多中低端安卓机 DPR=1，1px 就真只占 1 个物理像素。结果就是：同样写 border: 1px solid #000，在 Retina 屏上边框实际是 2 物理像素宽（视觉更“重”），在 DPR=1 设备上才是真正的细线。

width: 375px 为什么能在 iPhone 12 和 iPhone 13 上都刚好铺满？

因为 375 是逻辑像素宽度，不是物理像素。iPhone 12 和 13 的逻辑视口宽度都是 375px（通过 document.documentElement.clientWidth 可验证），尽管它们的物理分辨率分别是 1170×2532 和 1179×2532。浏览器在渲染时自动按 DPR 缩放——DPR=3 时，这 375 逻辑像素会映射到约 1125 物理像素宽度。你写的 375px 实际是告诉浏览器：“占满当前设备的逻辑视口”，而不是“占满 375 个发光点”。

用 window.screen.width 做响应式判断会出什么问题？

它返回的是物理像素总数，完全不可靠：

• iPhone 12 Pro Max 的 window.screen.width 是 1284（物理像素），但它的逻辑视口宽度只有 428px —— 直接用它写媒体查询，@media (min-width: 1284px) 永远不会命中移动端
• 某些安卓平板开启系统缩放后，window.screen.width 不变，但实际可用逻辑宽度已缩小
• window.screen 还受横竖屏、多窗口模式干扰，比如三星 DeX 模式下它可能返回桌面级数值

真正该用的是 document.documentElement.clientWidth 或媒体查询中的 width（指逻辑视口宽度）。

立即学习“前端免费学习笔记（深入）”；

什么时候必须关心物理像素？

极少，但有三个硬性场景绕不开：

• canvas 绘图：如果 canvas.width 和 canvas.height 按逻辑像素设（如 375×667），在 DPR=2 设备上会模糊——必须显式乘以 window.devicePixelRatio 并设置 style.width/style.height 缩放回逻辑尺寸
• 生成高清截图或 PDF：导出时需按物理像素采样，否则文字边缘发虚
• 适配 @2x/@3x 图片：srcset 中的 2x 含义就是“这张图的宽高是逻辑尺寸的 2 倍，专供 DPR≥2 的设备”

除此之外，所有布局、间距、字体大小，都应该基于逻辑像素思考——它才是浏览器渲染的真实坐标系。混淆物理像素，等于在和浏览器的缩放机制对着干。