手机端给了1px的横线，出来后要粗得多，这是为什么？
手机端给了1px的横线，出来后要粗得多，这是为什么？
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
手机端给了1px的横线，出来后要粗得多，这是为什么？
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
发布评论
评论（4）
1px对应物理设备的1pt, 视网膜屏像素数会加倍。一种解决方法是：scaleY(50%),或者使用background-image base64，根据背景色自动生成。
原因是 手机端浏览器的宽度和高度 会针对物理分辨率除以2，所以1px的border在手机的屏幕上就占了两个像素了；
以iphone6 为例，物理分辨率是750×1334，页面中通过 viewport获得的divice-weidth 为375像素，刚好除了2；
别的andriod手机也差不多会除以2，具体我没统计过；
淘宝ued给出过几个不错的最佳实践，比如题主提到的这个问题，淘宝是这么做的：动态判断是否为视网膜屏幕，如果是，则meta:vp中的缩放参数变成0.5来适应。具体可以参考一下这篇文章，写的很全，希望能解答你的疑惑：手机淘宝的flexible设计与实现
先谢各位。。后来给了一个1px的空标签，代替margin-bottom，暂时解决了，不过这个问题还有待研究。。