最近准备换工作，看看面试题（就是天王老子来了也不可能刷算法），看到了 1px 问题，说了一些怎么让 1px 变细的方法，我觉得没啥毛病，但是说 1px 是因为 devicePixelRatio 影响。
1px 我懂，devicePixelRatio 我也懂，放一起出来个 1px 问题我就有点迷糊。
直接引用 JavaScript高级程序设计 中 12.1.3 窗口位置与像素比 所描述：
CSS 像素是 Web 开发中使用的统一像素单位。这个单位的背后其实是一个角度：0.0213°。如果屏幕距离人眼是一臂长，则以这个角度计算的 CSS 像素大小约为 1/96 英寸。这样定义像素大小是为了在不同设备上统一标准。比如，低分辨率平板设备上 12 像素（CSS 像素）的文字应该与高清 4K 屏幕下12 像素（CSS 像素）的文字具有相同大小。这就带来了一个问题，不同像素密度的屏幕下就会有不同的缩放系数，以便把物理像素（屏幕实际的分辨率）转换为 CSS 像素（浏览器报告的虚拟分辨率）。
举个例子，手机屏幕的物理分辨率可能是 1920×1080，但因为其像素可能非常小，所以浏览器就需要将其分辨率降为较低的逻辑分辨率，比如 640×320。这个物理像素与 CSS 像素之间的转换比率由window.devicePixelRatio 属性提供。对于分辨率从 1920×1080 转换为 640×320 的设备，window.devicePixelRatio 的值就是 3。这样一来，12 像素（CSS 像素）的文字实际上就会用 36 像素的物理像素来显示。
window.devicePixelRatio 实际上与每英寸像素数（DPI，dots per inch）是对应的。DPI 表示单位像素密度，而 window.devicePixelRatio 表示物理像素与逻辑像素之间的缩放系数。
所以 px 单位的初衷就是希望统一不同设备上内容的显示效果，而 devicePixelRatio 表示为了实现这种统一需要的物理像素与逻辑像素之间的缩放系数。那这个怎么就能放一起得到一个问题呢？
为了严谨性，我谷歌搜索了 mobile 1px，首先压根没关联搜索，搜索出的结果也是毫不相干。
所以这到底谁想出来的东西，而且国内还流传广泛。。。。。。
那么 1px 为啥一些手机上显示粗，鄙人拙见：使用的物理像素只能是正整数，但是分辨率千奇百怪，所以一些设备显示时 devicePixelRatio * 逻辑像素 需要四舍五入，那么 1px 变粗可能是 1.75 四舍五入到 2 了。
