在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. secureCRT常用设置

    一.快捷键: 1. ctrl + a : 移动光标到行首[常用] 2. ctrl + e :移动光标到行尾[常用] 3. ctrl + d :删除光标之后的一个字符 4. ctrl + w : 删除行 ...

  2. Hibernate关联映射1:一对一主键关联

    2张表之间通过主键形成一对一映射关系,如一个人只能有一张身份证: t_identity_card表建表语句: CREATE TABLE `t_identity_card` ( `id` int(11) ...

  3. Verilog HDL常用的行为仿真描述语句

    一.循环语句 1.forever语句 forever语句必须写在initial模块中,主要用于产生周期性波形. 2.利用for.while循环语句完成遍历 for.while语句常用于完成遍历测试.当 ...

  4. Top 10 Uses of a Message Queue

    Top 10 Uses of a Message QueueAsynchronicity, Work Dispatch, Load Buffering, Database Offloading, an ...

  5. 初次使用nodejs的问题

    使用npm install -g 'xxx' 之后仍然报 Cannot find module 'xxx' 错误,可以通过设置环境变量来解决: export NODE_PATH=/usr/local/ ...

  6. mvc给html扩展方法：

    mvc给html扩展方法: 注意:扩展方法和所在的类都必须是 public static如果在页面直接使用新扩展的方法,需要web.config里把Web.Helper名称命名空间加上,页面才能访问到 ...

  7. onActivityResult不被执行的问题。

    1.首先,返回的Activity必须使用startActivityForResult启动. 2.其次,在返回的Activity中必须保证setResult方法在finish方法之前执行,否则onAct ...

  8. （三）映射对象标识符(OID)

    所有项目导入对应的hibernate的jar包.mysql的jar包和添加每次都需要用到的HibernateUtil.java 第一节:Hibernate 用对象标识符(OID)来区分对象 例子: h ...

  9. 摘录android工具类

    import android.content.Context; import android.content.pm.PackageInfo; import android.content.pm.Pac ...

  10. 【制作镜像Win*】环境准备

    1. 保证网络通 2. 保证系统为centos6.x/rhel 6.x 3. yum源正确,推荐使用utsc源,nailgun也ok 4.安装软件包 virsh list guestmount yum ...