R/GA的移動(dòng)web戰(zhàn)略家和設(shè)計(jì)師日前寫了一篇博客，關(guān)于iPad3的視網(wǎng)膜顯示屏?xí)䴙榫W(wǎng)頁設(shè)計(jì)者帶來哪些問題。之前，在iPhone4剛出來的時(shí)候，我們手忙腳亂地為客戶設(shè)計(jì)針對(duì)視網(wǎng)膜顯示屏的圖片版本。而現(xiàn)在，iPad的屏幕帶來了同樣的問題。
“屏幕分辨率正在變大，適應(yīng)是網(wǎng)頁設(shè)計(jì)唯一的出路，天還沒有塌下來。”—@robweychert
天還沒塌下來，適應(yīng)最可能是唯一的出路，但是我們確實(shí)需要更多的工具來處理不同的分辨率以便于更好的適應(yīng)。Apple公司這個(gè)做法，就如同給我們提供一輛汽車，可能有喇叭障礙，但是同時(shí)提供給我們安全帶和氧氣袋。既然這個(gè)高分辨率已經(jīng)來了，那我們來看看針對(duì)高分辨率屏幕的一些技術(shù)和策略。
@media queries
我們可以使用@media queries來針對(duì)高分辨率的屏幕來設(shè)置不同的樣式，包括不同的背景圖片。但這不僅僅是關(guān)于圖片的問題，Brad Birdsall演示了針對(duì)高分辨率的絕妙設(shè)計(jì)。我在想media queries 和最優(yōu)加載，針對(duì)像素密度是不是和針對(duì)設(shè)備寬度的是一樣的道理。
SVG
有些人提過SVG對(duì)創(chuàng)建像素獨(dú)立圖片的好處。有篇很好的關(guān)于如何用SVG實(shí)現(xiàn)像素獨(dú)立的文章。建議你在實(shí)踐之前先看Max Firtman的 兼容性列表。
@font-face
使用@font-face創(chuàng)建icon是個(gè)很好的方法。它們不管屏幕分辨率是多少都一樣表現(xiàn)很好。Chris Coyier有個(gè)很好關(guān)于@font-face icons in action的示例。確保你僅僅是加載字符，而不是大量的字體文件。看看font awesome，一個(gè)免費(fèi)的Twitter Bootstrap的圖標(biāo)文字。
監(jiān)測(cè)網(wǎng)絡(luò)速度
這就是技巧所在。并不是所有的高分辨率設(shè)備一定要加載高分辨率的圖片。正如我昨天提到的，用戶可能是在火車或者巴士上，用著EDGE網(wǎng)絡(luò)或3G網(wǎng)絡(luò)，他所需要的僅僅是內(nèi)容，而不是高分辨率體驗(yàn)。如果默認(rèn)加載高分辨率的圖片，網(wǎng)站性能和用戶的流量將受到打擊。我們需要能夠根據(jù)用戶的網(wǎng)絡(luò)條件類加載最需要的東西。
navigator.connection看來有所幫助，但是基本的網(wǎng)絡(luò)類型（EDGE, 3G, wi-fi, 等）并不能代表全部。在巴士上或者星巴克里面，一個(gè)共享的網(wǎng)絡(luò)很有可能比3G網(wǎng)絡(luò)更慢。
有一些其他有趣的檢測(cè)網(wǎng)絡(luò)的工具。我很希望知道是否有人使用它以及如何使用。
新的HTML元素
響應(yīng)式圖片工作組在嘗試如何更好地根據(jù)網(wǎng)絡(luò)條件來提供內(nèi)容。他們?cè)诮ㄗh一個(gè)新的HTML元素，這個(gè)元素可以檢測(cè)容積、網(wǎng)絡(luò)速度、像素密度等來提供更好的用戶體驗(yàn)。讓我們好好期待究竟是什么元素。
最佳實(shí)踐
- 低像素圖片優(yōu)先- 很多設(shè)備沒有高分辨率的屏幕，所以默認(rèn)大量地加載高分辨率的圖片將是個(gè)錯(cuò)誤。應(yīng)該使用檢測(cè)技術(shù)按需加載。這個(gè)和響應(yīng)式設(shè)計(jì)的移動(dòng)優(yōu)先的圖片策略很相似。
- 利用圖片優(yōu)化的基本原則 – 這點(diǎn)很明顯，盡管花時(shí)間來優(yōu)化圖片，特別是高分辨率圖片，以更加有利于移動(dòng)設(shè)備，節(jié)約流量，再優(yōu)化等等
- 利用CSS3 技術(shù)如背景漸變，圓角等，任何可能避免使用圖片的地方。我有預(yù)感，iPad3發(fā)布之后，很多的電子商務(wù)網(wǎng)站（特別是時(shí)裝類的）將會(huì)感到困難重重。
- 盡可能地使用像素獨(dú)立方案- SVG， @font-face，甚至是基本的 HTML特殊字符可以幫助避免分辨率相關(guān)的問題。
- 檢測(cè)網(wǎng)絡(luò)連通性 – 你在設(shè)計(jì)你的網(wǎng)站用戶體驗(yàn)的時(shí)候，要牢記這點(diǎn)。
- 注意兼容性 –現(xiàn)在依然有很多設(shè)備不支持SVG， @font-face 和CSS3技術(shù)。請(qǐng)記住，跟隨漸進(jìn)增強(qiáng)的實(shí)踐來確保是高分辨率設(shè)備的最優(yōu)版的同時(shí)還支持更多設(shè)備