手机客户端知识整理(一):iOS视网膜(Retina)屏幕的适配方法
手机客户端知识整理(一):iOS视网膜(Retina)屏幕的适配方法-移动阅读二维码

手机客户端知识整理(一):iOS视网膜(Retina)屏幕的适配方法

作为一枚手机客户端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 allnotestabitem 24×24 allNotesTabItem.png
Retina allnotestabitem@2x 48×48 allNotesTabItem@2x.png

 

3.2.web控件中图片素材的支持

√ 只需要宽和高各增加一倍后的图片素材

√ 在webview的样式中,指定此图片的widht=50%、height=50%,或者指定绝对像素值为实际像素值的一半。

举例如下,在此实例中,图片会显示为真实图片的宽高各一半大小,但在Retina上不会模糊和有颗粒感。

类型 图片 尺寸(px) 样式
Retina allnotestabitem@2x 48×48 <img width=”24″ height=”24″ src=”allNoteTabItem.png” />

<img width=50% height=50% src=”allNoteTabItem.png” />

(完)

原文链接:http://www.penddy.com/mobile-client-kn……-the-retina-screen.html

本文链接:http://www.mobileui.cn/retina-the-screen-adaptation-method.html
本文标签: , , , , ,