这是一个在移动端 Web 开发中非常经典且高频的面试题/实战问题。以下是关于“移动端 1px 边框问题”的成因分析及主流解决方案。 --- 一、 问题的成因 简单来说，是因为 CSS 中的 1px 并不等于设备屏幕上的 1 物理像素。 1. 核心概念：DPR (Device Pixel Ratio) 物理像素 (Physical Pixel)：屏幕上实际发光的物理点，是显示器显示的最小单位。 逻辑像素 (Logical Pixel / CSS Pixel)：CSS 中使用的 单位。 设备像素比 (DPR)：。 2. 现象解释 在早期的普通屏幕（标准屏）上，DPR = 1，此时 ，显示没有问题。 但在 Retina 屏（高清屏） 上，DPR 通常为 2 或 3。 DPR = 2 时：。 这意味着，当你设置 时，手机实际上用了 2个物理像素 的宽度来渲染这条线。 结果：设计师想要的是 1 物理像素的细线（Hairline），但前端写了 后，屏幕上显示的是 2 物理像素（甚至 3 物理像素）的线。所以在视觉上，边框看起来变粗了，不够精致。 --- 二、 常见的解决方案 目前业界主要有以...
播面