看上去很简单吧？只需要一个媒体查询就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; width: 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。
欢迎有兴趣的童鞋补充~
