个人中心
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
文章推荐： iphone - 以编程方式检查 iPhone 上的 GPS 是否启用
文章推荐： delphi - 使用 Delphi XE6 将类型库导入组件面板
文章推荐： json - TREST请求 : How to add an array as the body of a PUT request
文章推荐： iphone - 如何在iPhone中实现条形图？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com