Css学习: hairline
极细的 border 实现
What
先看一下问题是什么。
| 原生的 line | css实现的 border-line |
|---|---|
 |  |
When
什么时候会出现这个问题，因为正常 border:1px 是可以按“预期” 方式显示的。
下面说的 case，我均未测试。
- iOS Retina 屏，设置 1px 边框，实际显示 2px
- 他们曾介绍到 iOS 8 和 OS X Yosemite 即将支持 0.5px 的边框，ios8之前的设备需要考虑这个问题(所以，现在已经ios16了，这个问题天然不用考虑，直接0.5px即可)
- 另外 Android 设置也存在这个问题
Why
只有在出现这个 border: 0 的错误解释才需要解决这个问题。
问题是 retina 屏的浏览器可能不认识0.5px的边框，将会把它解释成0px，没有边框。包括 iOS 7 和 之前版本，OS X Mavericks 及以前版本，还有 Android 设备。How
如何检测这个问题
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);
}
// 脚本应该放在<body>内， 如果在<head>里面运行，需要包装 $(document).ready(function() { })How
如何解决这个问题，等项目有需要再去寻求最佳实践。