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