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

优点：

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

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

欢迎有兴趣的童鞋补充~

hairline！ios实现边框0.5px的更多相关文章

  1. 边框0.5px的实现方法

    原理: css3 的缩放   ---->    transform: scale() 完整代码如下: <!DOCTYPE html> <html lang="en&q ...

  2. CSS3实现0.5px的边框

    前端页面细节处理好了才会显得精致.边框在网页中是常见的一种样式了.虽然不把它处理为0.5px看上去没毛病,但是想让你做的东西征服更多的人,这些细节处理是必须的. 今天主要说一下如何让边框显示0.5px ...

  3. [转]retina屏下支持0.5px边框的情况

    2014-12-31更新:截至到IOS8.1,safari仍不支持@supports待safari支持@supports, 就可以利用0.5px了! 2014-7-25更新:1. 修正dpr = 1. ...

  4. div背景透明内容不透明与0.5PX边框兼容设置

    1.问题:设置 border-width:0.5px;  并兼容安卓和苹果移动端.  兼容:苹果IOS的 safari 支持浮点数边框,安卓浏览器不支持,会四舍五入到1px.不同浏览器效果额不同  解 ...

  5. css写出0.5px边框（一）

    在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0. ...

  6. css3写出0.5px的边框

    一说到0.5px的边框,我们一般认为是不行的,因为在ps中0.5px的线也是做不出来的,这个计算机的像素有关系. 废话不多说了,0.5px 其实用的是css3新特性,box-shadow:阴影设置 代 ...

  7. CSS 0.5px 细线边框的原理和实现方式

    细线边框的具体实现方法有:伪元素缩放或渐变,box-shadow模拟,svg画线,border-image裁剪等.要实现小于1px的线条,有个先决条件:屏幕的分辨率要足够高,设备像素比要大于1,即cs ...

  8. 0.5px的边框

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. CSS3实现0.5px边框

    用CSS设置边框宽度为0.5px,可以使边框看起来更加细腻,特别是在移动端,设计师会有这样的要求. 但遗憾的是,大多数Android手机并不能识别0.5px.因此我们可以使用CSS3来变通的实现0.5 ...

随机推荐

  1. wpf 计算器布局练习

    先看一下windows自带计算机的布局: 大概布局能看出,有菜单栏(menu),有显示框(textbox),然后剩下的6行5列的布局 先看下代码: <StackPanel> <Gri ...

  2. Ubuntu 12.04 root默认密码？ 如何使用root登录？

    在安装Ubuntu 12.04时并没有设置root的密码,登录的时候也没有使用root账户.当我们使用root权限时,一般都使用sudo命令进行.那么当我们安装完毕Ubuntu 12.04时,root ...

  3. 职场PPT达人装酷的13条秘诀

    对<说服力-让你的PPT会说话>读者调查显示,88.8%的白领认为“做出漂亮的幻灯片对晋升有帮助”,99.9%的白领一致认为职场装酷神器排行榜第一位是PPT,甚至有位程序员说哥最牛的编程环 ...

  4. nyoj 202 红黑树

    红黑树 时间限制:3000 ms  |            内存限制:65535 KB 难度:3   描述 什么是红黑树呢?顾名思义,跟枣树类似,红黑树是一种叶子是黑色果子是红色的树... 当然,这 ...

  5. http://venkatbaggu.com/file-upload-in-asp-net-mvc-using-dropzone-js-and-html5/

    http://venkatbaggu.com/file-upload-in-asp-net-mvc-using-dropzone-js-and-html5/ http://www.cnblogs.co ...

  6. android 中 系统日期时间的获取

    import    java.text.SimpleDateFormat; SimpleDateFormat    formatter    =   new    SimpleDateFormat   ...

  7. <video>和<audio>标签

    一.<video>基本格式: <video width=" " heigh="" src=""> </vide ...

  8. Socket的3次握手链接与4次断开握手

    http://blog.sina.com.cn/s/blog_810c860001018tir.html 连接握手: 1.客户端发送建立连接请求 2.服务端确认连接请求 3.客户端确认已经连接 以上3 ...

  9. .NET笔记系列：LAMBDA表达式常用写法

    这里主要是将数据库中的常用操作用LAMBDA表达式重新表示了下,用法不多,但相对较常用,等有时间了还会扩展,并将查询语句及LINQ到时也一并重新整理下: 1.select语句:books.Select ...

  10. Angularjs中使用$location获取url参数时，遇到的坑~~~

    今天在开发时候,需要用到Angularjs1.4.6获取url参数,网上查了一下,有部分文章提到用$location来获取.大致方法如下 var app = angular.module('myApp ...