iOS视网膜(Retina)屏幕的适配方法

本文连接：http://www.penddy.com/mobile-client-knowledge-processing-1-ios-retinal-adaptation-of-the-retina-screen.html

   在产品中良好的支持Retina屏幕。

1、支持视网膜(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

2、以前的设备

设备	分辨率	屏幕尺寸	长宽比	解析度
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

3、适配的方式

从上面的设备参数来看，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" />  或  <img width=50% height=50% src="allNoteTabItem.png" />

(完)