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

(完)