在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. hysdk代码解析

    navigator 1. navigator.userAgent 浏览器的用户代理字符串 2. navigator.platform 浏览器所在的系统平台 window 1. window.devic ...

  2. 一个苹果证书怎么多次使用(授权Mac开发)——导出p12文件

    为什么要导出.p12文件 当我们用大于三个mac设备开发应用时,想要申请新的证书,如果在我们的证书里,包含了3个发布证书,2个开发证书,可以发现再也申请不了开发证书和发布证书了(一般在我们的证书界面中 ...

  3. S-DES加密

    Simplified Data Encryption Standard S-DES 是一个供教学的非安全的加密算法,它与DES的特性和结构类似,但参数小,明文分组为8位,主密钥分组为10位,采用两轮迭 ...

  4. ASP.NET Identity 用户注册相关设定

    此部分可以在 Web项目中的App_Start目录下的 IdentityConfig.cs 文件进行设置. 1.配置密码的验证逻辑 manager.PasswordValidator = new Pa ...

  5. 20151210 Jquery 学习笔记 AJAX 进阶

    一．加载请求 在 Ajax 异步发送请求时,遇到网速较慢的情况,就会出现请求时间较长的问题.而超 过一定时间的请求,用户就会变得不再耐烦而关闭页面.而如果在请求期间能给用户一些提 示,比如:正在努力加 ...

  6. UIImagePickerController显示中文界面

    iOS开发中,我们经常遇到获取拍照.相册中图片的功能,就必然少不了UIImagePickerController,但是我们发现当我们使用它的时候,它的页面是英文的,看着很别扭,国人还是比较喜欢看中文界 ...

  7. 类型与通用语言运行时：System.Object

    CLR 要求每个类型最终都要继承自 System.Object 类型 //隐式继承 Object class Employee { ... } //显示继承继承 Object class Employ ...

  8. javascript 获取url参数

    /** window.location.search获取url地址?以后的值 获取url参数有两种方法,第一种如下,第二种是通过正则 */ //基本版 function getParam() { va ...

  9. Java教程——CMD手动编译运行失败原因（高手略过）

    (仅对新手,高手略过)在学习Java初期,我们在利用cmd手动编译java程序的时候,会遇到编译成功,但运行却总是提示失败.已经排除了java配置环境的问题,Path和ClassPath以及%JAVA ...

  10. HDU 1619 Unidirectional TSP（单向TSP + 路径打印）

    Unidirectional TSP Problem Description Problems that require minimum paths through some domain appea ...