Despite the many benefits of Retina displays, there is one clear drawback that must be considered when designing for high-density screens:

尽管Retina显示器具有许多优点，但在设计高密度屏幕时仍必须考虑一个明显的缺点：

必须避免细线 。 (Thin lines must be avoided.)

You might be more familiar with this problem as a font-rendering issue: very thin weights at small sizes tend to render poorly, since they are expressed through a variety of different rendering engines (some with anti-aliasing effects applied, which may cause unexpected distortions).

您可能将这个问题作为字体渲染问题更为熟悉：小尺寸的粗细权重字体往往表现不佳，因为它们是通过多种不同的渲染引擎来表达的(有些应用了抗锯齿效果，这可能会导致意外的扭曲)。

But, this can also present in other high-contrast elements, such as element borders.

但是，这也可能出现在其他高对比度元素中，例如元素边界。

Here is an example of a button with a 1px border, which does not render well because it is too thin:

这是一个带有1px边框的按钮的示例，该边框太细，因此无法很好地呈现：

原创设计 (Original Design)

设计调整1：移除边框 (Design Tweak 1: Remove Border)

The first approach to solving this issue is to remove the border entirely: it isn’t required. The element does have contrast issues with the background, but only the play icon needs to be recognizable (and it is, with a near 100% contrast ratio).

解决此问题的第一种方法是完全消除边界：这不是必需的。 该元素的背景确实存在对比度问题，但仅需要识别播放图标(对比度约为100％)。

设计调整2：使边框变厚 (Design Tweak 2: Make Border Thicker)

Another approach would be to make the border thicker. This solves most sub-pixel rendering issues. However, there are no other elements with similar border emphasis:

另一种方法是使边界更厚。 这解决了大多数子像素渲染问题。 但是，没有其他元素具有类似的边框重点：

您更喜欢哪种方法？ (Which approach do you prefer?)