我们在html中，如果要设置一个1像素的边框，最常见的就是border: 1px solid #000; 这句就表示设置一个1像素的，实心的，黑色的边框。这个css语句，在pc上毫无问题，但是随着移动web的兴起，貌似就有些问题了。可以试验一下，把这句放到手机浏览器中显示一下，然后屏幕截图，你会惊奇的发现，1px已经显示为2px了。如果你放到iphone6 plus下，你会更神奇的发现，居然是3px。
那么，为什么设置为1px的边框，在手机下会显示为2px，甚至3px呢？其实，这就是retina屏幕搞的鬼。
至于retina的原理，这里就不多介绍了，retina的做法是把1像素分割成4个像素显示，这样看起来更细腻，但其实还是1像素。所以，1px的边框，在retina屏幕上就会显示成2px的宽度。
这个不是我们希望的，怎么办呢？我们可以用一些方法来解决这个问题。
第一个方法最简单，在ios8以上的iphone中，支持0.5像素显示，所以，只要设置为0.5就可以了。
Hairline Border
Standrad border syntax;
div{
border:1px solid black;
}
Retina hairline border syntax:
@media(-webkit-min-device-pixel-ratio:2){
div{
border-width:0.5px;
}
}
这个很简单，但是，仅仅支持ios8以上的iphone，安卓不兼容，会显示为0。所以，这个不是一个好办法。即该解决方案需要写hack兼容老旧系统。
三种方案：
1、JS判断UA，是否是ios8+，是的话则输出类名hairlines，为了防止重绘，这段代码加在head里即可。
if (/iP(hone|od|ad)/.test(navigator.userAgent)) {
var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/),
version = parseInt(v[1], 10);
if(version >= 8){
document.documentElement.classList.add('hairlines')
}
}
2、JS判断是否支持0.5px边框，是的话，则输出类名hairlines。
if (window.devicePixelRatio && devicePixelRatio >= 2) {
var testElem = document.createElement('div');
testElem.style.border = '.5px solid transparent';
document.body.appendChild(testElem);
if (testElem.offsetHeight == 1)
{
document.querySelector('html').classList.add('hairlines');
}
document.body.removeChild(testElem);
}
// This assumes this script runs in , if it runs in wrap it in $(document).ready(function() { })
相比于第一种方法，这种方法的可靠性更高一些，但是需要把js放在body标签内，相对来说会有一些重绘，个人建议是用第一种方法。
3、服务端做ios版本判断，输出相应的类名，相比于JS的实现，个人更倾向于在服务端完成，这样前端也少几行代码，并且更加可靠。如在wormhole里的实现（wormhole是nodejs环境下的一个服务端渲染模版的容器）：
{{#if($plugins.detector.os.name === "ios" && $plugins.detector.os.version >= 8)}}
{{set (hairlines = "hairlines")}}
{{/if}}
加上类名后，就可以针对该类名写相应的css了。比如：
div{border:1px solid #000}
.hairlines div{border-width:0.5px}
也许你会问，那ios7以下和其他android机下怎么搞？我的建议是：还是维持老样，不去处理，随着时间的推移，我相信最终都会支持0.5 和 0.3 px边框的。
如果硬要兼容，怎么整？方案也有很多，稍微介绍下：
1、通过viewport + REM的方式来兼容。目前这种兼容方案相对比较完美，适合新项目（老项目改用REM单位成本会比较高）。 淘宝M首页 就是这种方案。
在devicePixelRatio = 2 时，输出viewport
在devicePixelRatio = 3 时，输出viewport
同时通过设置对应viewport的rem基准值，这种方式就可以像以前一样轻松愉快的写1px了。
其他方案（该部分内容来源于妙净同学的分享）：
2、 transform: scale(0.5)
实现方式
height:1px;
-webkit-transform: scaleY(0.5);
-webkit-transform-origin:0 0;
overflow: hidden;
缺点不少：圆角无法实现，hack代码多，实现4条边框比较闹心。只能单独使用，如果嵌套，scale的作用也会对包含的元素产生，不想要的影响，所以此种方案配合:after和:before独立使用较多，比如画一个商品的边框四条线，容器的after和before可以画2条线，利用容器的父元素的after、before再画2条线。
.after-scale{
position: relative;
}
.after-scale:after{
content:"";
position: absolute;
bottom:0px;
left:0px;
right:0px;
border-bottom:1px solid #c8c7cc;
-webkit-transform:scaleY(.5);
-webkit-transform-origin:0 0;
}
3、 box-shadow
实现方式，利用css 对阴影处理的方式实现0.5px的效果
底部一条线
-webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);
优点：基本所有场景都能满足，包含圆角的button，单条，多条线，
缺点：颜色不好处理， 黑色 rgba(0,0,0,1) 最浓的情况了。有阴影出现，不好用。
4、 background-image，实现方式：设置1px通过css 实现的image，50%有颜色，50%透明
.border {
background-image:linear-gradient(180deg, red, red 50%, transparent 50%),
linear-gradient(270deg, red, red 50%, transparent 50%),
linear-gradient(0deg, red, red 50%, transparent 50%),
linear-gradient(90deg, red, red 50%, transparent 50%);
background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
background-repeat: no-repeat;
background-position: top, right top, bottom, left top;
padding: 10px;
}
优点：配合background-image,background-size,background-position 可以实现单条，多条边框。边框的颜色随意设置
缺点：如果有圆角的效果，很sorry 圆角的地方没有线框的颜色。都要写的代码也不少
5、 用图片
.border-image{
border-image:url("data:image/png;base64,iVBORw0KGgoAABABJRU5ErkJggg==") 2 0 stretch;
border-width: 0px 0px 1px;
}
缺点：也可以通过修改图片来达到圆角的效果，但是由于图片的原因，压缩过后的图片边缘变模糊了（不放大的情况下不明显），需要引用图片或者base64，边框颜色修改起来不方便。
