Use border-width: 0.5px
Safari 8 (in both iOS and OS X) brings border-width: 0.5px. You can use that if you’re ready to accept that current versions of Android and old versions of iOS and OS X will just show a regular border (a fair compromise in my opinion).
You can’t use this directly though, because browsers that don’t know about 0.5px borders will interpret it as 0px. No border. So what you need to do is add a class to your <html> element when it is supported:
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() { })
Then, using retina hairlines becomes really easy:
div {
border: 1px solid #bbb;
}
.hairlines div {
border-width: 0.5px;
}
Best of all, you can use border-radius with it. And you can use it with the 4 borders (top/right/bottom/left) as easily.
Source: http://dieulot.net/css-retina-hairline
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
