6

如何在视网膜显示器上用真正像素宽的移动 Safari 画一条线？

我试过：

border-bottom:0.5px solid #fff;

和

border-bottom:0.05em solid #fff;

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

移动版 Safari 始终绘制一个像素宽的线条（视网膜显示屏上为 2 个像素）或根本不绘制线条。如何让移动 safari 画一条真正像素 (0.5px) 宽的线？

4

4 回答 4

4

使用规模。下面的款式会给你发际线

 .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/

于 2013-09-25T06:37:32.543 回答
2

采用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

于 2014-09-29T10:07:00.240 回答
1

我通常不建议真正使用 0.5 像素。但是你想要回退到它。

只需将后备放在顶部即可。像这样。

border-bottom: 1px solid #fff;
border-bottom: 0.5px solid #fff;
于 2013-07-23T16:28:15.977 回答
0

警告：许多手机现在是 3 倍（每个逻辑像素 3 个实际像素）。

因此 0.5px 在数学上等于 1.5 个真实像素——这是不可能一致渲染的。

因此，如果您尝试在某物周围放置 0.5 像素的边框，那么它在物理上不可能保持一致。现在浏览器可能决定总是将其四舍五入为 1 个真实像素或 2 个真实像素，或者它可能会尝试对其进行抗锯齿处理。不幸的是，即使是“薄”，厚度也不会呈现为一个设备像素。

更糟糕的情况是 scanerio 会在一个边缘使用 1 个像素，在另一个边缘使用 2 个像素，这最终会看起来很糟糕。因此，请务必记住这一点并在 3 倍手机上进行测试。

于 2021-10-08T22:06:58.993 回答