移动端视网膜（Retina）屏幕下1px边框线 解决方案 -- 不错 保留

原因：

因为Retine屏的分辨率始终是普通屏幕的2倍，1px的边框在devicePixelRatio=2的retina屏下会显示成2px。

但在IOS8中，已经支持0.5px了，那就意味着, 在devicePixelRatio=2的时候，我们可以使用如下的css：

div{
border:1px solid #000;
}

@media (-webkit-min-device-pixel-ratio: 2) {
div{
border:0.5px solid #000;
}
}

但在ios7以下，android等其他系统里，0.5px会被显示为0px，所以需要写hack来兼容旧版本的系统。

有两种方案：

1、JS判断浏览器版本，是否是IOS8+，是的话则加上hairlines的类名，加在head里即可。

CSS代码：

div{
border:1px solid #000
}

.hairlines div{
border-width:0.5px
}

JS代码：

　　

2、JS判断是否支持0.5px的边框，是的话，则加上hairlines的类名。（代码放在body内）

将代码放在body内会有一些重绘，第一种方法会更好一些。

当然这些方法，只能兼容IOS7包括IOS7以上的机器，但如果想兼容其他机器怎么办呢？这块我就要细细道来...

在retina屏下面，如果你写了这样的meta

<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

你将永远无法写出1px宽度的东西。

关于CSS像素和物理像素的定义，这个文章里有详细的介绍 走向视网膜（Retina）的Web时代。

在

viewport

中, 因为设置了initial-scale(表示初始时的缩放比例),minimum-scale(最小缩放比例)和maximum-scale(最大缩放比例)都为1, 因此整个页面都不能缩放, retina 屏幕下1个 css 像素对应 2个(多个)物理像素, 因此我们永远写不出1px(物理)宽度的东西. 然而我们其实可以这样写:

淘宝M端 就是这样的方案，这样一个css的像素就能完美对应1个物理像素，我们就可以写出1px的东西了。

其他方案：

1. transform: scale(0.5)

方法1：

CSS代码：

　　

HTML代码：

　

缺点

圆角无法实现，实现4条边框比较麻烦，并且只能单独实现，如果嵌套，会对包含的效果产生不想要的效果，所以此方案配合:after和before独立使用较多。

比如画一个商品的边框四条线，容器的after和before可以画2条线，利用容器的父元素的after、before再画2条线。

　　

2. box-shadow

实现方法：

利用CSS对阴影处理的方式实现0.5px的效果。

优点：

基本所有场景都能满足，包含圆角的button，单条，多条线。

缺点：

颜色不好处理， 黑色 rgba(0,0,0,1) 最深的情况了。有阴影出现，不好用。　　
大量使用box-shadow可能会导致性能瓶颈。
四条边框实现效果不理想。

3. 使用background-image

使用 background-image 实现1px有两种方式: 渐变 linear-gradient 或直接使用图片(base64)。

渐变 linear-gradient (50%有颜色，50%透明)

单条线：

多条线：　　

优点:

可以设置单条,多条边框
可以设置颜色

缺点:

大量使用渐变可能导致性能瓶颈
代码量大
多背景图片有兼容性问题

　　

用图片(base64)：

优点:

可以设置单条,多条边框
没有性能瓶颈的问题

缺点:

修改颜色麻烦, 需要替换图片
需要用到两张图片

多背景图片有兼容性问题

文章来源：http://www.cnblogs.com/wangshiyang/p/4824923.html