hairline！ios实现边框0.5px - DEPSI_H5之家 - 中国HTML5教程资源分享第一站

在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-width: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 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;
width: 50%;
height: 100px;
margin: 0 auto;
color: blue;
border: 3px solid #7c7c7c;
}
</style>

</head>
<body>
<div>
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。

欢迎有兴趣的童鞋补充~