在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. 导入cocos2d-x samples android官方示例

    导了一晚上samples android示例,查了一晚上资料,费了很大的劲,终于成功导入并运行成功,分享一下经验: 1.下载eclipse与ADT跟android SDK,相信大家都会装了吧. 2.下 ...

  2. MySQL【第三篇】数据类型

    一.整型 整型的每一种都有无符号(unsigned)和有符号(signed)两种类型. MySQL数据类型 含义 tinyint(m) 1个字节表示:signed(-128~127):unsigned ...

  3. android自定义View之钟表诞生记

    很多筒子觉得自定义View是高手的象征,其实不然.大家觉得自定义View难很多情况下可能是因为自定义View涉及到了太多的类和API,把人搞得晕乎乎的,那么今天我们就从最简单的绘图API开始,带大家来 ...

  4. 【排障】使用DiskGenius修复0扇区损坏

    用PE引导启动进入PE后打开DiskGenius软件 "硬盘"图形菜单------选择驱动器符号(例如C) 主界面中显示该硬盘的分区格式为FAT32,起始柱面0,起始磁头65. 在 ...

  5. AWS IAM (Identity and Access Management) 使用笔记

    为 AWS 管理控制台登录页面 URL 创建别名 $ aws iam create-account-alias --account-alias <value> 创建用户 $ aws iam ...

  6. HttpClient4.4 进行Http连接通讯

    以前一直使用jdk自带的urlConnection来进行http通讯,HttpClient与之相比,HttpClient更具有灵活度和易用性.HttpClient能够方便使用连接池,使用时需要重新创建 ...

  7. git设计哲学

    刚开始使用git的时候,总想拿git来和cvs或者svn来作对比,但不久后发现这个想法本身就是错的,git完全就是另外一种物种,一种本属于未来的物种.它的对象存储方式,快照,分支等,都是完全不同的. ...

  8. Netty 5用户指南

    Netty是一个提供异步事件驱动的网络应用框架,用以快速开发高性能.高可靠性的网络服务器和客户端程序.换句话说,Netty是一个NIO框架,使用它可以简单快速地开发网络应用程序,比如客户端和服务端的协 ...

  9. C# 右键菜单 contextMenuStrip

    1.添加contextMenuStrip控件 默认命名:contextMenuStrip1 2.在要显示的控件上,找到其ContextMenuStrip属性,并设置其为contextMenuStrip ...

  10. zzzzw_在线考试系统③完结篇

    昨天填完原本打算写有关“学生考试部门”的总结,但是因为时间来不及,所以推迟到今天来写. 至于最后的:“老师登录”部门就没什么好说的了,只要会了“管理员部分”和“学生考试部分”的书写,剩下就只是耐心的一 ...