转自:http://www.penddy.com/mobile-client-kNowledge-processing-1-ios-retinal-adaptation-of-the-retina-screen.html
版权声明:转载时请以超链接形式标明文章原始出处和作者信息
本文链接:http://www.penddy.com/mobile-client-knowledge-processing-1-ios-retinal-adaptation-of-the-retina-screen.html
作为一枚手机客户端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视网膜屏幕的设备,是在同等尺寸上,支持的分辨率的宽和高各增加了一倍,解析度(每英寸像素数)增加了一倍。
即显示在同样尺寸的空间上,所需要的图片素材的尺寸需要增加一倍,具体到实践上面有两个要点:
√ 需要在非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 |
√ 在webview的样式中,指定此图片的widht=50%、height=50%,或者指定绝对像素值为实际像素值的一半。
举例如下,在此实例中,图片会显示为真实图片的宽高各一半大小,但在Retina上不会模糊和有颗粒感。
类型 |
尺寸(px) |
样式 |
|
Retina |
48×48 |
<img width="24" height="24" src="allNoteTabItem.png" /> |
(完)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。