Iphone 在mobile safari中，视网膜显示屏上的线条厚度为0.5px（1个真实像素）_Iphone_Css_Mobile_Safari

Iphone 在mobile safari中，视网膜显示屏上的线条厚度为0.5px（1个真实像素）

iphone css mobile safari

Iphone 在mobile safari中，视网膜显示屏上的线条厚度为0.5px（1个真实像素）,iphone,css,mobile,safari,Iphone,Css,Mobile,Safari,我怎样才能用移动safari在视网膜显示器上画出一个真正的像素宽我试过：边框底部：0.5px实心#fff 及边框底部：0.05em实心#fff 具有介于0.01em和0.1em之间的不同值 MobileSafari总是画一条1像素宽（视网膜显示器上有2个像素）或根本没有的线。如何让mobile safari绘制一条宽为一个真实像素（0.5px）的线？我通常不建议使用0.5英寸的像素。但你想退一步只要把后备队放在最上面。像这样 border-bottom: 1px solid #fff;

我怎样才能用移动safari在视网膜显示器上画出一个真正的像素宽

我试过：

边框底部：0.5px实心#fff
及
边框底部：0.05em实心#fff
具有介于0.01em和0.1em之间的不同值
MobileSafari总是画一条1像素宽（视网膜显示器上有2个像素）或根本没有的线。如何让mobile safari绘制一条宽为一个真实像素（0.5px）的线？
我通常不建议使用0.5英寸的像素。但你想退一步
只要把后备队放在最上面。像这样
border-bottom: 1px solid #fff;
border-bottom: 0.5px solid #fff;

使用天平。下面的发型会给你发际线
 .transform-border-hairline {
     border-bottom: 1px #ff0000 solid;
     transform: scaleY(0.5);
 }

更具体地说（这是现场使用的技巧）
使用边框宽度：0.5px
Safari 8（在iOS和OS X中）带来了边框宽度：0.5px
。如果你愿意接受当前版本的Android和旧版本的iOS和OSX只会显示一个规则的边框（我认为这是一个公平的折衷方案），那么你可以使用它
但是您不能直接使用它，因为不了解0.5px
边框的浏览器会将其解释为0px
。没有边界。因此，您需要做的是在
元素受支持时向其添加一个类：
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() {   })

最好的是，您可以使用边界半径。您可以轻松地将其与4个边框（上/右/下/左）一起使用
来源：使用.05em之类的东西怎么样？@sheriffderek:谢谢你的提示。尝试使用不同的em值，但不起作用。要么safari显示了1px宽的线（2个真正的px），要么根本没有。我发现了这个，但我也读到iOS6不好用。这里有一个关于像素的话题：@sheriffderek:谢谢你的研究。我会尽快看一看视频。第一个链接并没有让我充满希望。似乎是一个几乎没有希望的情况-除了使用像提到的一个调整。事实上，我不是在寻找一个退路。我正在寻找一种在iPhone屏幕上打印一条1像素宽的线的方法。但是你可能需要某种退步，这样就可以在桌面上看到它，对吗？嗯，退步是有意义的。但在我需要退路之前，我需要一个有效的解决方案。我还没有时间完全阅读这篇文章——但似乎就是这样！谢谢，天才！就像魔术一样。
div {
  border: 1px solid #bbb;
}

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