移动端一像素边框

如何实现在移动端中显示一像素的边框

仔细看两条线是不一样的

实现方案一：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%透明

综合理想的方案：

需要有sass基础

以上方法可供参考，实际开发中选择使用！