Retina手持显示器：是否可以通过CSS实现1像素边框？

Question

3

我遇到了这样的问题：我的 iPhone 4 设计概念包括 1 像素的边框，但我不知道 Retina 设备使用 2 倍的宽高比来测量 CSS。

于是我开始利用一个针对 max-device-width:640px （竖屏）的媒体查询来设计页面，并发现只有在将视口元标签设置为 initial-scale=.5 后才能达到预期效果。

问题在于：如果我不想设置 initial-scale=.5 并且想以 iPhone 的实际像素尺寸定义媒体查询，似乎就没有办法在 Retina 屏幕上实现 1 像素的边框。因为设置 border:.5px 会强制 iOS 计算其整数值 —— 这似乎会导致结果更接近于 0 而非 1。

- Circuit Circus

1

双倍密度屏幕并不意味着它将一个像素显示为2个。只需将边框设置为1像素，它就是1像素。而且您无需设置“max-width: 640px”以针对设备，对于 iPhone 来说，它仍然是320px。 - Tigran Petrossian

@TigranPetrossian iPhone 4实际上具有iPhone 3的两倍分辨率和两倍DPI。如果您不采取措施，浏览器将把所有像素值乘以2，否则输出将非常非常小！ - Mr Lister

谢谢，Lister先生！不幸的是，.5px和.33em都无法解决这个问题。在Retina iPhone上两者都没有显示出线条...我想我必须改变我的概念，不再包括“真正”的1像素线条了。 - Circuit Circus

@TigranPetrossian 即使屏幕是双倍密度，iPhone 仍然只有相同的 320 像素，因此 1 像素边框看起来有点太粗了。我已经成功地使用了 2px x 2px 的图像，并将其缩小 50%，然后重复使用。我知道这不是完美的解决方案，但似乎可以工作。 - Thilak Rao

@ThilakRao 最终你是对的 - 这是一个可行的解决方案，但它有点像一个不如我之前提到的 viewport-meta 更干净的 hack。 - Circuit Circus

显示剩余2条评论

2个回答

0

你可以尝试以下方法：

border: thin solid black;

- DungGramer

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- monners · Accepted Answer

这是我在iPhone上实现1像素边框的方法（已在iPhone 5上测试）。

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

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

很显然，这使得为实际充当容器的任何内容应用1px边框变得棘手，但对于真正的1像素分隔线来说，它会起到作用。