gpt4 book ai didi

iphone - Retina 显示屏上可以有 0.5 像素的边框吗?

转载 作者:行者123 更新时间:2023-12-03 18:31:30 24 4
gpt4 key购买 nike

在 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 个边框(上/右/下/左)一起使用。

来源:http://dieulot.net/css-retina-hairline

关于iphone - Retina 显示屏上可以有 0.5 像素的边框吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8640521/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com