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