你的位置:首页 > 网页设计

[网页设计]hairline!ios实现边框0.5px


在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 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 >
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就可以了。

优点:

  1. ios8及以上正确显示0.5px
  2. 安卓及其他不支持的浏览器显示原先定义的border-width

缺点:笔者手头没有高清屏的PC及Mac,所以以上方法不支持高清屏Mac及PC。

欢迎有兴趣的童鞋补充~