如何实现在移动端中显示一像素的边框
实现方案一：0.5像素
标准边框语法
div{
border: 1px solid black;
}
高清屏边框语法
@media (-webkit-min-device-pixel-ratio: 2) {
div {
border-width: 0.5px;
}
}
以上方式就可以将虚拟一像素变成真实一像素
实现方案二：viewport
在devicePixelRatio = 2 时，输出viewport
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
在devicePixelRatio = 3 时，输出viewport
<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">
实现方案三： transform: scale(0.5)
height:1px;
-webkit-transform: scaleY(0.5);
-webkit-transform-origin:0 0;
overflow: hidden;
实现方案四 ：box-shadow
利用css 对阴影处理的方式实现0.5px的效果底部一条线
-webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);
实现方案五：background-image
设置1px通过css 实现的image，50%有颜色，50%透明
综合理想的方案：
以上方法可供参考，实际开发中选择使用！
