在2014WWDC上，Ted O’Connor提出了“retina hairlines”的解决方案，即在ratina屏幕上可以显示0.5px宽度的边框。他的方案是这样的：
1 Standard border syntax：
2 div{
3 border:1px solid black;
4 }
5 Retina hairline border syntax:
6 @media(-webkit-min-device-pixel-ratio:2){
7 div{
8 border-0.5px;
9 }
10 }
看上去很简单吧？只需要一个媒体查询就OK了，但是笔者在实际使用后发现很蛋疼。因为许多具有ratina屏幕的设备比如ios7及更早版本，devicePixelRatio大于2的安卓设备，OS X Mavericks及更早版本，它们会默认为border-width等于0，即没有边框。
下面笔者给出自己的解决方案：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximun-scale=1,user-scalable=no">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.hairline {
display: flex;
justify-content: center;
align-items: center;
50%;
height: 100px;
margin: 0 auto;
color: blue;
border: 3px solid #7c7c7c;
}
</style>
</head>
<body>
<div class="hairline">
hairline~
</div>
<script>
$(function(){
var agent = navigator.userAgent.toLowerCase() ;
var version;
if(agent.indexOf("like mac os x") > 0){
//ios
var regStr_saf = /os [d._]*/gi ;
var verinfo = agent.match(regStr_saf) ;
version = (verinfo+"").replace(/[^0-9|_.]/ig,"").replace(/_/ig,".");
}
var version_str = version+"";
if(version_str != "undefined" && version_str.length >0){
version=version.substring(0,1);
if(version>=8){
$('.hairline').css('border-width','0.5px');
}
else{
}
}
});
</script>
</body>
</html>
以上DEMO可以Copy运行。
使用方法：在需要0.5px的地方添加.hairline就可以了。
优点：
- ios8及以上正确显示0.5px
- 安卓及其他不支持的浏览器显示原先定义的border-width
缺点：笔者手头没有高清屏的PC及Mac，所以以上方法不支持高清屏Mac及PC。
欢迎有兴趣的童鞋补充~