R/GA的移動web戰略家和設計師日前寫了一篇博客，關于iPad3的視網膜顯示屏會為網頁設計者帶來哪些問題。之前，在iPhone4剛出來的時候，我們手忙腳亂地為客戶設計針對視網膜顯示屏的圖片版本。而現在，iPad的屏幕帶來了同樣的問題。

“屏幕分辨率正在變大，適應是網頁設計唯一的出路，天還沒有塌下來。”—@robweychert

天還沒塌下來，適應最可能是唯一的出路，但是我們確實需要更多的工具來處理不同的分辨率以便于更好的適應。Apple公司這個做法，就如同給我們提供一輛汽車，可能有喇叭障礙，但是同時提供給我們安全帶和氧氣袋。既然這個高分辨率已經來了，那我們來看看針對高分辨率屏幕的一些技術和策略。

@media queries

我們可以使用@media queries來針對高分辨率的屏幕來設置不同的樣式，包括不同的背景圖片。但這不僅僅是關于圖片的問題，Brad Birdsall演示了針對高分辨率的絕妙設計。我在想media queries 和最優加載，針對像素密度是不是和針對設備寬度的是一樣的道理。

SVG

有些人提過SVG對創建像素獨立圖片的好處。有篇很好的關于如何用SVG實現像素獨立的文章。建議你在實踐之前先看Max Firtman的 兼容性列表。

@font-face

使用@font-face創建icon是個很好的方法。它們不管屏幕分辨率是多少都一樣表現很好。Chris Coyier有個很好關于@font-face icons in action的示例。確保你僅僅是加載字符，而不是大量的字體文件。看看font awesome，一個免費的Twitter Bootstrap的圖標文字。

監測網絡速度

這就是技巧所在。并不是所有的高分辨率設備一定要加載高分辨率的圖片。正如我昨天提到的，用戶可能是在火車或者巴士上，用著EDGE網絡或3G網絡，他所需要的僅僅是內容，而不是高分辨率體驗。如果默認加載高分辨率的圖片，網站性能和用戶的流量將受到打擊。我們需要能夠根據用戶的網絡條件類加載最需要的東西。

navigator.connection看來有所幫助，但是基本的網絡類型（EDGE, 3G, wi-fi, 等）并不能代表全部。在巴士上或者星巴克里面，一個共享的網絡很有可能比3G網絡更慢。

有一些其他有趣的檢測網絡的工具。我很希望知道是否有人使用它以及如何使用。

新的HTML元素

響應式圖片工作組在嘗試如何更好地根據網絡條件來提供內容。他們在建議一個新的HTML元素，這個元素可以檢測容積、網絡速度、像素密度等來提供更好的用戶體驗。讓我們好好期待究竟是什么元素。

最佳實踐

• 低像素圖片優先- 很多設備沒有高分辨率的屏幕，所以默認大量地加載高分辨率的圖片將是個錯誤。應該使用檢測技術按需加載。這個和響應式設計的移動優先的圖片策略很相似。
• 利用圖片優化的基本原則 – 這點很明顯，盡管花時間來優化圖片，特別是高分辨率圖片，以更加有利于移動設備，節約流量，再優化等等
• 利用CSS3 技術如背景漸變，圓角等，任何可能避免使用圖片的地方。我有預感，iPad3發布之后，很多的電子商務網站（特別是時裝類的）將會感到困難重重。
• 盡可能地使用像素獨立方案- SVG， @font-face，甚至是基本的 HTML特殊字符可以幫助避免分辨率相關的問題。
• 檢測網絡連通性 – 你在設計你的網站用戶體驗的時候，要牢記這點。
• 注意兼容性 –現在依然有很多設備不支持SVG， @font-face 和CSS3技術。請記住，跟隨漸進增強的實踐來確保是高分辨率設備的最優版的同時還支持更多設備