Retina 手持显示器：可以通过 CSS 实现 1px 边框吗？答案

【问题标题】：Retina handheld displays: Can a 1px border be achieved via CSS?Retina 手持显示器：可以通过 CSS 实现 1px 边框吗？
【发布时间】：2021-04-14 17:10:08
【问题描述】：

我遇到了这样一个问题，即我的 iPhone 4 等显示器的设计概念包括 1px 边框，我不知道 Retina 设备以 2x 的纵横比测量 CSS。

因此，我开始利用max-device-width:640px（用于纵向）的媒体查询来设计页面，并认识到如果我将视口元设置为initial-scale=.5，这只会看起来像预期的那样。

问题是：如果我不想设置initial-scale=.5 并以 iPhone 的实际像素尺寸定义媒体查询，似乎无法在 Retina 显示器上实现 1px 宽的边框等，因为设置 border:.5px 将强制 iOS 计算它的整数值 - 这似乎导致 0 而不是 1。

【问题讨论】：

双密度屏幕并不是说1像素显示为2。只要设置一个边框为1px，它就是1px。而且您不需要设置max-width: 640px 来定位设备，它与iPhone 相同的320px。
您可以检查.5px 的值是否有效。或.33pt 为例。
@TigranPetrossian iPhone 4的分辨率和DPI实际上是iPhone 3的两倍。如果不采取措施，浏览器会将所有像素值乘以2，否则，输出真的很小！
谢谢李斯特先生！不幸的是，.5px 和 .33em 都无法处理这个问题。在 Retina iPhone 上，两者都没有返回任何线条......我想我将不得不改变我的概念，不包括“真正的”1px 线条。
@TigranPetrossian 即使认为屏幕是双倍密度的，你仍然会得到与 iPhone 相同的 320 像素，因此 1 像素的边框看起来有点太胖了。我已经成功使用 2px x 2px 图像并将其缩放 50% 然后重复。我知道这不是完美的解决方案，但似乎可行。

标签： iphone ios css viewport initial-scale

【解决方案1】：

这就是我在 iPhone 上实现 1px 边框的方式（在 iPhone 5 上测试）。

HTML
<span class="hr"></span>

CSS
.hr {
    display: block;
    width: 100%;
    border-bottom: 1px solid black;
    -webkit-transform: scaleY(0.1);
}

显然，这使得将 1px 边框应用于任何实际充当容器的东西变得很棘手，但它会为真正的 1px 分隔符解决问题。

【讨论】：

谢谢！尽管从可靠的跨浏览器/设备兼容概念的意义上来说，这对我来说不是一种方法，但我很高兴以这种方式学习特定于 webkit 的 CSS。我发现样式表的逻辑有很多超出我想象的功能......

【解决方案2】：

你可以试试：

border: thin solid black;

【讨论】：