手机端给了1px的横线，出来后要粗得多，这是为什么？

Question

手机端给了1px的横线，出来后要粗得多，这是为什么？

Answer 1

1px对应物理设备的1pt, 视网膜屏像素数会加倍。一种解决方法是：scaleY(50%),或者使用background-image base64，根据背景色自动生成。

Answer 2

原因是 手机端浏览器的宽度和高度 会针对物理分辨率除以2，所以1px的border在手机的屏幕上就占了两个像素了；

以iphone6 为例，物理分辨率是750×1334，页面中通过 viewport获得的divice-weidth 为375像素，刚好除了2；

别的andriod手机也差不多会除以2，具体我没统计过；

Answer 3

淘宝ued给出过几个不错的最佳实践，比如题主提到的这个问题，淘宝是这么做的：动态判断是否为视网膜屏幕，如果是，则meta:vp中的缩放参数变成0.5来适应。具体可以参考一下这篇文章，写的很全，希望能解答你的疑惑：手机淘宝的flexible设计与实现

Answer 4

先谢各位。。后来给了一个1px的空标签，代替margin-bottom，暂时解决了，不过这个问题还有待研究。。