作为一枚手机客户端PM，适配视网膜屏幕是一项需要掌握的基础知识，了解这个有助于和开发、设计师进行沟通，便于向设计师提出UI需求，从而在产品中良好的支持Retina屏幕。
一、支持视网膜(retina)屏幕的设备
| 设备 | 分辨率 | 屏幕尺寸 | 长宽比 | 解析度 |
| iPod Touch 4 | 640×960 | 3.5" | 3:2 | 326ppi |
| iPhone 4 | 640×960 | 3.5" | 3:2 | 326ppi |
| iPhone 4S | 640×960 | 3.5" | 3:2 | 326ppi |
| The New iPad | 2048×960 | 9.7" | 4:3 | 264ppi |
二、之前的设备
| 设备 | 分辨率 | 屏幕尺寸 | 长宽比 | 解析度 |
| iPod Touch 1/2/3 | 320×480 | 3.5" | 3:2 | 163ppi |
| iPhone、iPhone 3G、iPhone 3GS | 320×480 | 3.5" | 3:2 | 163ppi |
| iPad 1/2 | 1024×768 | 9.7" | 4:3 | 132ppi |
三、适配的方式
从上面的设备参数来看，iOS视网膜屏幕的设备，是在同等尺寸上，支持的分辨率的宽和高各增加了一倍，解析度（每英寸像素数）增加了一倍。
即显示在同样尺寸的空间上，所需要的图片素材的尺寸需要增加一倍，具体到实践上面有两个要点：
3.1.原生控件中图片素材的支持
√ 需要在非Retina屏幕的图片素材基础上，额外提供宽和高各一倍的图片素材
√ 命名上需要命遵从如下命名规则：假定非Retina屏幕的图片素材为filename.png，则需要将宽和高各一倍的图片素材命名为filename@2x.png
注意：@2x必须小写
举例如下，在此实例中，非Retina屏幕中，会调用allNotesTabItem.png，在Retina屏幕中，会调用allNotesTabItem@2x.png，但因为解析度的缘故，显示的物理尺寸仍然是同样大小。
| 类型 | 图片 | 尺寸(px) | 命名 |
| 非Retina |  | 24×24 | allNotesTabItem.png |
| Retina | | 48×48 | allNotesTabItem@2x.png |
3.2.web控件中图片素材的支持
√ 只需要宽和高各增加一倍后的图片素材
√ 在webview的样式中，指定此图片的widht=50%、height=50%，或者指定绝对像素值为实际像素值的一半。
举例如下，在此实例中，图片会显示为真实图片的宽高各一半大小，但在Retina上不会模糊和有颗粒感。
| 类型 | 图片 | 尺寸(px) | 样式 |
| Retina | | 48×48 | <img width="24" height="24" src="allNoteTabItem.png" /> |
(完)
