在 iPhone 4 或 iPhone4S 上的 Mobile Safari 上，是否可以设置 0.5 像素宽的 div 边框？
最佳答案
使用border-width: 0.5px
Safari 8(iOS 和 OS X 中)带来 border-width: 0.5px 。如果您准备好接受当前版本的 Android 以及旧版本的 iOS 和 OS X 将仅显示常规边框(我认为这是一个公平的妥协)，您可以使用它。
但是你不能直接使用它，因为浏览器不知道 0.5px borders 会将其解释为 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 个边框(上/右/下/左)一起使用。
关于iphone - Retina 显示屏上可以有 0.5 像素的边框吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8640521/