在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 2.1.4学习笔记01：windows平台搭建cocos2d-x开发环境

    cocos2d-x的大致开发流程是,首先使用win32版进行代码编写并完成游戏,然后将代码迁移到对应的开发环境上进行交叉编译完成游戏打包,如iphone上是mac+xcode,android是ecli ...

  2. jsp中的包含 include标签和ejb的小知识点

    <!-- 用inclue指令导入安全登录防护代码(静态包含) --> <!-- 静态包含:把被包含代码拷到当前类中形成一个新的类,执行.包含与被包含代码是合写在同一个类(servic ...

  3. Java基础知识强化之IO流笔记54：IO流练习之 LineNumberReader的特有的功能使用

    1. LineNumberReader的特有的功能:  BufferedReader |--LineNumberReader  public int getLineNumber():获得当前行号.   ...

  4. Nginx高性能服务器安装、配置、运维 （2） —— Nginx安装

    三.Nginx 安装 使用SecureCRT以Root身份登录阿里云,在安装Nginx前先做好阿里云磁盘挂载 -------------- 挂载磁盘 -------------- 1.df -h #显 ...

  5. Win10 10586 更新

    最近发现,电脑c盘突然少了许多,发现c盘多了个windowsBT文件夹,大概6个G,恩,win10 又推出更新了,版本10586. 不知道为啥,更新时win10 把原来的下载的删除了,大概出了什么错误 ...

  6. 20151221jquery学习笔记---日历UI

    妹的,这几天真是无语了,参加了一个无聊的比赛,简直浪费时间,好几天没学jquery啊,今天学了一点,不过快要期末考试了,估计得攒到寒假了啊. 日历(datepicker) UI, 可以让用户更加直观的 ...

  7. 使用ROW_NUMBER进行的快速分页

    DECLARE @pageSize INT ; DECLARE @pageIndex INT ; SET @pageSize = 5 SET @pageIndex =2 ; --第二页,每页显示5条数 ...

  8. oracle从各个表取得数据保存到另一个表

    从各个表中取得数据保存另一个表中: CREATE VIEW PARAMETER_view ASWITH tall AS ( SELECT p.PI_NO,--产品序列号 p.SERIALNO,--产品 ...

  9. EOF是什么？

    转自http://www.ruanyifeng.com/blog/2011/11/eof.html 学习C语言的时候,遇到的一个问题就是EOF. 它是end of file的缩写,表示"文字 ...

  10. ABP手机端调用API时的CORS

    这个问题其实很早就考虑了,当时因为也没有特别着急去解决这个问题,就一直拖着.... 好吧,拖延症是不好的,所有不懒得做的,终将会逼着你去再很短的时间内去解决问题...实现项目 改写一个已有的webfo ...