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

Question

我遇到了一个问题，我的iPhone 4显示器的设计概念包括1px边框，我不知道Retina设备测量宽高比为2x的CSS。

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

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

Answer 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分隔符提供技巧。

Answer 2

你可以试试：

border: thin solid black;