高 DPI 顯示器、解析度獨立性、網路和您

我們都使用 72 DPI 作為創建網路圖像的默認標準（實際上，“PPI” 是更合適的縮寫，但很少使用）。 這曾經是顯示器的實際解析度，但隨著時間的推移，這種情況已不再是這樣。 以我的 iMac 為例。 螢幕水平方向的直線長度為 22.5 英寸，並具有 1920 個像素。 這實際上約等於每英寸 85 個像素，而不是 72 個。 當我們在同一台電腦/顯示器上設計和測試網站時，一切看起來都很好，就像我們設計的那樣。 但是當我們跳到具有不同解析度的另一台電腦時，就會出現顯著的差異！

在具有 **更高解析度** 的顯示器上查看設計時，設計將 **看起來更小**。

在具有 **較低解析度** 的顯示器上查看設計時，設計將 **看起來更大**。

假設我在我的 85 PPI 顯示器上設計了一個 800 像素寬的漂亮網站。 然後我在 100 PPI 顯示器上查看了完全相同的設計。 這 800 像素在更高解析度的顯示器上佔用的物理英寸數更少，因為像素實際上更小。 它們在與我的原始顯示器相同的英寸中被壓縮了更多。 反之亦然也是如此，如果我要在 72 PPI 顯示器上查看，設計似乎會變大。

這不再是幻想或猜測。 讀者 Denzil Rowe 指導我閱讀 Apple Insider 上的一篇最近文章，其中 Apple 正在談論此問題如何影響操作系統本身。 面臨這些問題的不是網路，而是顯示器上出現的任何內容。

一些新款 Mac 附帶超過 100 PPI 的顯示器。 100 PPI 和 72 PPI 之間的差異非常顯著。 在 72 PPI 顯示器上查看設計時，任何幾乎太小的東西在 100 PPI 顯示器上都可能完全無法閱讀。

**那麼解決方案是什麼？** 短期來看，請注意差異，如果仍然使用較舊的 72 PPI 顯示器，請勿設計過小的東西。 長期來看，**解析度獨立性**。

Dave Hyatt 幾年前就對這個話題寫了很多東西。

解決這個“高 DPI”問題的自然方法是自動放大內容，以便用戶可以輕鬆地閱讀和查看它。 當然，僅僅選擇一個令人愉悅的默認值是不夠的，因為個人的喜好可能差異很大……因此，解決此問題的完整方案是允許您的用戶界面進行縮放，縮放因子由用戶配置。 這意味著網路內容必須可縮放，整個頁面根據用戶選擇的放大倍數進行適當縮放。

換句話說，縮放是解決方案的一部分，我們在所有最新版本的瀏覽器中都看到了這種趨勢。 縮放的問題是，很明顯，當您將圖像放大超過其創建大小時，它們看起來很糟糕。

SVG（可縮放向量圖形）很可能成為有助於我們解決縮放問題的圖像格式。 但是，新格式會帶來所有典型問題。 所有瀏覽器是否都支持它，並且以相同的方式支持？ CSS 規範是否需要更改以適應它？ 它將如何降級？ 不斷地。

Dave 的文章展示了如何在支持它的瀏覽器中為我們的網站創建“高解析度”版本的代碼示例。

div {
  background: url(tiger-low.png);
  background: url(tiger-high.png) (100px 100px);
}

未來即將到來！ 儘管感覺主流網路還需要一段時間才能讓日常設計師擔心這些事情。

相關的是，您是否知道 CSS 中的像素不一定等於螢幕像素？