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技术。请记住，跟随渐进增强的实践来确保是高分辨率设备的最优版的同时还支持更多设备