在移动野生动物园的视网膜显示器上线宽0.5px(1个真实像素)

时间:2013-07-23 16:03:39

标签: iphone css mobile safari

如何在视网膜显示屏上绘制一条真正像素宽的移动野生动物园线?

我试过了:

border-bottom:0.5px solid #fff;

border-bottom:0.05em solid #fff;

在0.01em和0.1em之间具有不同的值。

Mobile Safari始终绘制一条像素宽的线(视网膜显示屏上的2个像素)或根本不绘制线条。如何让移动safari绘制一条真实像素(0.5px)宽的线?

3 个答案:

答案 0 :(得分:3)

使用比例。下面的风格将为您提供发线

 .transform-border-hairline {
     border-bottom: 1px #ff0000 solid;
     transform: scaleY(0.5);
 }

更具体地说(以及现场使用中的技巧)http://atirip.com/2013/09/22/yes-we-can-do-fraction-of-a-pixel/

答案 1 :(得分:1)

我通常建议不要使用.5像素。但是你想要回退它。

只需将后备放在首位。像这样。

border-bottom: 1px solid #fff;
border-bottom: 0.5px solid #fff;

答案 2 :(得分:1)

使用border-width: 0.5px

Safari 8(iOS和OS X)带来border-width: 0.5px。你可以使用它,如果你已经准备好接受当前版本的Android和旧版本的iOS和OS X将只显示一个常规边界(在我看来是一个公平的妥协)。

您无法直接使用此功能,因为不了解0.5px边框的浏览器会将其解释为0px。无边界。因此,您需要做的是在支持时为<html>元素添加一个类:

if (window.devicePixelRatio && devicePixelRatio >= 2) {
  var testElem = document.createElement('div');
  testElem.style.border = '.5px solid transparent';
  document.body.appendChild(testElem);
  if (testElem.offsetHeight == 1)
  {
    document.querySelector('html').classList.add('hairlines');
  }
  document.body.removeChild(testElem);
}
// This assumes this script runs in <body>, if it runs in <head> wrap it in $(document).ready(function() {   })

然后,使用视网膜细线变得非常容易:

div {
  border: 1px solid #bbb;
}

.hairlines div {
  border-width: 0.5px;
}

最重要的是,你可以使用border-radius。您可以轻松地将它与4个边框(顶部/右侧/底部/左侧)一起使用。

来源:http://dieulot.net/css-retina-hairline