iOS視網膜(Retina)螢幕的適配方法

標籤：

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

   在產品中良好的支援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，則需要將寬和高各一倍的圖片素材命名為[email protected]

注意：@2x必須小寫

舉例如下，在此執行個體中，非Retina螢幕中，會調用allNotesTabItem.png，在Retina螢幕中，會調用[email protected]，但因為解析度的緣故，顯示的物理尺寸仍然是同樣大小。

類型	圖片	尺寸(px)	命名
非Retina		24×24	allNotesTabItem.png
Retina		48×48	[email protected]

  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" />

(完)

iOS視網膜(Retina)螢幕的適配方法