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?)