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 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。

欢迎有兴趣的童鞋补充~

转载于:https://www.cnblogs.com/depsi/p/5013071.html

hairline！ios实现边框0.5px相关推荐

[css] 怎么实现移动端的边框0.5px？
[css] 怎么实现移动端的边框0.5px? 一种是通过transform中的scaleborder: 1px solid red;transform: scaleY(.5);一种是通过meta vi ...
边框0.5px实现方法
方案1:伪元素+scale (兼容性好,推荐) 实现方式:给容器设置伪元素,设置绝对定位,宽高都是200%,边框是1px,然后使用transform:scale(0.5) 让伪元素缩小原来的一半,此时 ...
css3实现0.5px边框、圆角渐变色边框+圆角渐变色背景
效果图 0.5px边框 0.5px边框,可以用伪元素实现,before.after都可以.移动端H5页面用的比较多. 圆角渐变色边框+圆角渐变色背景实现外部圆角边框,内部圆角渐变色背景,是用父div ...
使用css3做0.5px的细线
Webapp中的CSS3实现 0.5px的细线感觉很长时间没写过博客了,最近生活还算稳定,过得较为充实,所以又要开始写写东西了,一个是为了做些记录,是怕自己某一天,忘记了,回头翻翻博客,就会再次的拾 ...
[转]retina屏下支持0.5px边框的情况
2014-12-31更新: 截至到IOS8.1,safari仍不支持@supports 待safari支持@supports, 就可以利用0.5px了! 2014-7-25更新: 1. 修正dpr = ...
div背景透明内容不透明与0.5PX边框兼容设置
1.问题:设置 border-width:0.5px; 并兼容安卓和苹果移动端. 兼容:苹果IOS的 safari 支持浮点数边框,安卓浏览器不支持,会四舍五入到1px.不同浏览器效果额不同解 ...
html怎么添加5px高的线,CSS 0.5px 细线边框的原理和实现方式
细线边框的具体实现方法有:伪元素缩放或渐变,box-shadow模拟,svg画线,border-image裁剪等.要实现小于1px的线条,有个先决条件:屏幕的分辨率要足够高,设备像素比要大于1,即cs ...
0.5px边框，css及sass
手机上的边框,1px的宽度已经无法满足需求了,0.5px的需求应用而生. 做法: 利用伪类,做一个长宽200%,1px宽度的边框,再缩小至0.5倍. div {position: relative; ...
html怎么添加5px高的线,css给div添加0.5px的边框
具体代码实现如下: border div{ position: relative; width: 100%; background-color: #fff; } div:before{ content ...
[前端CSS高频面试题]如何画0.5px的边框线（详解）
往期css3文章详解 CSS3中最好用的布局方式--flex弹性布局(看完就会) CSS3基础属性大全 CSS3动画属性 animation详解(看完就会) CSS3 transform 2D转换之 ...

hairline！ios实现边框0.5px

hairline！ios实现边框0.5px相关推荐

最新文章

热门文章