Can you have a 0.5px border on a Retina Display?
On Mobile Safari on an iPhone 4 or iPhone4S, can you have a border of a div that is 0.5px wide?
Answer
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.