iPhone屏幕適配，歷史及現狀(http://hjcapple.github.io/2014/10/10/iphone-screen.html)

iPhone屏幕適配，歷史及現狀

 

初代iPhone

2007年，初代iPhone發佈，屏幕的寬高是320×480像素。下文也是按照寬度，高度的順序排列。這個分辨率一直到iPhone 3GS的也保持不變。

那時編寫的iOS應用程序的（應用程序），只支持絕對定位。好比一個按鈕（X，Y，寬度，高度）=（20，30，40，50），就表示它的寬度是40像素，高度是50像素，放在（20，30）像素的位置。

iPhone 4

2010年，iPhone 640×960像素。

這樣就出現一個問題，怎麼讓原有的App運行在新的手機上面？iPhone手機一個優點，就是有衆多優秀的App，假如不兼容原有的App，就至關於放棄這個得來不易的優點，是很不明智的。

每當iPhone的屏幕有所變化，好比iPhone 3GS的過渡到iPhone 4，iPhone 4的過渡到iPhone 5，iPhone 5過渡到iPhone 6，蘋果公司都須要想辦法來解決上述的兼容問題。

爲了運行以前的App，引入一個新的概念point(點)。點這個概念在iOS開發中十分重要，而實際用戶不多關注。iPhone 4屏幕尺寸繼續保持320×480，不過單位並不是是像素，而是點。

• 在iPhone 3GS的中，1個點等於1個像素。也就是說，點跟像素能夠直接互換。
• 在iPhone 4中，1個點等於2個像素。

這篇文章中，我將點和像素當成一維的長度單位，而非二維的面積單位，這樣對於我來講更天然些，所以1個點等於2個像素。別的文章中可能會說1個點等於4個像素，實際上是指1個點佔據了4個像素的面積，這樣也沒有說錯，注意上下文語境。

iPhone 4和iPhone 4在單位英寸上像素更多，看起來更細膩。

開發iOS版的時候，使用點做爲基本單位會更加方便列表。對比

機型	屏幕寬高，單位點	屏幕模式	屏幕對角線長度
iPhone 3GS的	320×480	1X	3.5英寸
iPhone 4	320×480	2倍	3.5英寸

這裏的屏幕模式能夠初步理解成，一個點等於多少個像素。2x，就是1個點等於2個像素。

總結一下單位

• 手機屏幕的物理長度，使用英寸做爲單位。好比iPhone 4的屏幕是3.5英寸，iPhone 5是4英寸，6 iphone 4.7是英寸，這裏的數字是指手機屏幕對角線的物理長度。

• 屏幕像素，好比iPhone 3GS的屏幕是320×480像素，iPhone 4是640×960像素，這裏的像素能夠想象成屏幕上真正用來顯示顏色的發光小點。

• 點，開發App時候使用的單位，是一個虛擬的單位，並不是實際存在的，所以點有時也叫虛擬點。點這個單位，用於屏蔽各個屏幕設備的不一樣，兼容之前的程序。

每英寸有多少個像素，稱爲PPI（每英寸像素）.iPhone 4的屏幕是640× 4的屏幕叫做視網膜顯示屏.Retina在英文中，是視網膜的意思。

iPhone 4以後（X，Y，寬度，高度）=（20，30，40，50），就表示高度爲40個點，寬度爲50個點，放在（20，3GS的應用程序，不用修改也可運行在iPhone 4上面。

文字，顏色等是矢量數據，放大不會失真。原有的iPhone 3GS的程序，在iPhone 4上面運行，文字顯示也十分清晰。

而圖片並不是矢量數據，處理方式有所不一樣。假設圖片example.png，大小爲30× 3GS和iPhone 4中使用時候，都佔據屏幕上30×40個點。而由於iPhone 4中1個點等於2個像素，也就是30×40像素的圖片，佔據了60×80像素的屏幕，所以這圖片在iPhone 4中看起來就會模糊。

開發的時候，爲使得圖片清晰，須要進行圖片適配。這時須要準備兩張內容相同的圖片，放在同一目錄下。

example.png // 30×40像素 的例子@ 2 x.png // 60×80像素 

當程序中使用example.png的時候，會根據屏幕模式自動選擇對應的圖片。屏幕1x模式，就會選擇example.png, 2X模式就會優先選擇example@2x.png，假如example@2x.png不存在，就選擇example.png。

圖片跟屏幕同樣，也有1倍模式，2倍模式。在iPhone 6加中，還出現3倍模式，原理是同樣的。

當iPhone 4選中example@2x.png的圖片，就會生成一張大小爲30× ×40個點，1個模式的圖片，看起來比較模糊。但它們佔據的屏幕點數是同樣的。

iphone 5

2012年，蘋果發佈iPhone 5，咱們將全部機型對比。

機型	屏幕寬高，單位點	屏幕模式	屏幕對角線長度
iPhone 3GS的	320×480	1X	3.5英寸
iPhone 4	320×480	2倍	3.5英寸
iphone 5	320 * 568	2倍	4英寸

跟iPhone 4作比較，iPhone 5的寬度保持不變高度增長568 - 480 = 88個點。

在iOS開發中，44這個數字比較特殊。iOS界面指南寫着，人類的手指有必定大小，點擊區域低於44個點的時候，就難以點中。44的兩倍就是88。

當原有程序沒有適配iPhone 5的時候，也能夠正常運行，但多出來的88個點將會將會被自動均分爲上下兩部分，使得上下出現黑邊。我找不到好看的圖片。

那麼怎樣才能告訴iOS的系統，應用程序已經適配了iPhone 5呢？在這裏，咱們先扯開一下，談一下啓動圖片。

點擊主屏幕的圖標，進入App的時候，會當即顯示一張圖片，這張圖片就是啓動圖片(Launch Image)。App在正式啓動的時須要作一些初始化處理，這一般比較費時。先出現啓動圖片，可使用戶以爲系統當即有響應，減小等待的焦慮感。

每一個機型，好比同時支持iPhone和iPad的程序，須要分別爲iPhone跟iPad指定啓動圖片。當舊的iPhone 4的程序，運行在iPhone 5上面，沒有iPhone 5的啓動圖片，就採用兼容模式，上下留黑邊。當爲iPhone 5指定了新的啓動圖片，系統就認爲這個應用程序是已經適配了iPhone 5的，上下就不會留黑邊了。下面是微信啓動圖片，應該都很熟悉了。

微信啓動圖片中出現的那個地球，叫藍色彈珠（藍 5，相比與iPhone 4，很明顯狹長了。

中間一大塊用於顯示的內容區.iPhone 4跟iPhone 5的對比。

自動版式

到了這個時候，傳統絕對定位的弱點就顯露出來了。這時iPhone按照點做爲單位，已經出現了兩種不一樣尺寸的屏幕，算上iPad,就有3種尺寸（有些應用能夠同時兼容iPhone和iPad上，稱爲通用型）。

從iOS版6系統發佈後，iOS開發中能夠採用一種AutoLayout的技術。AutoLayout就像網頁同樣，指定View，Button，Text之間的相對位置，好比靠左多少，靠右多少，居中多少等等。舉個例子，像下面的簡單佈局。

假設左上角的區域爲廠景，右上角的區域爲view2的，下面的區域爲view3.AutoLayout會說：

view1.left = 20 //視圖1的左邊距離邊界20個點 view1.top = 20 //視圖1的上邊距離邊界20個點  view2.right = 20 //視圖2的右邊距離邊界20個點 view2.top = 20 //視圖2的上邊距離邊界20個點 view2.left = view1.right + 20 //視圖2的左邊距離視圖1右邊20個點 view2.width = view1.width //視圖1的寬度等於視圖2的寬度 view2.height = view1.height //廠景高度等於view2的高度  view3.left = view1.left // VIEW3的跟廠景左對齊 view3.right = view2.right // VIEW3跟視圖2對齊向左向右 view3.top = view1.bottom + 20 // VIEW3的上邊距離廠景下邊20個點 VIEW3 .bottom = 20 // VIEW3下邊距離邊界20個點 view3.height = view1.height // VIEW3高度等於廠景高度 

指定上面的約束條件後，AutoLayout就會自動算出對應的佈局。上面我寫得比較繁瑣，事實上不少操做都是可使用鼠標拖拉來指定的，並不必定須要使用代碼。但就算用代碼，也有簡寫的方法。下面是在xib中，拖拉鼠標指定約束時的界面。

而絕對定位，會直接說

view1.frame =（X1，Y1，寬度1，height1） view2.frame =（X2，Y2，寬2，身高2） view3.frame =（X3，Y3，width3，height3）

絕對定位並不是指定約束條件，而是開發者本身來精確指定視圖，按鈕，文本等的實際座標大小。

對於一個屏幕，絕對定位可能跟AutoLayout的區別不算大，甚至絕對定位會更方便些。但當須要同時適配多個屏幕，AutoLayout根本不須要更改。而絕對定位就須要根據屏幕大小，一個個算出來。好比橫屏，在AutoLayout下面，就自動變成。

這裏不過是3個控件的佈局，當出現的控件數越多，屏幕尺寸越多，AutoLayout的優點就顯露出來了。另外AutoLayout有個好處是容易支持多語言，不一樣語言下，同一個意思文字的長度是不一樣的，使用AutoLayout也能夠自動適配。

在iOS 6中的時候，自動版式還比較少人使用，當時屏幕尺寸還比較少.IOS 7的時候，就開始不少人使用了。而到如今的iOS 8了，更加上iPhone 6，iPhone 6加須要適配，自動版式大勢所趨，不用不行了。

iPhone 6，iPhone 6加

2014年，iPhone 6，iPhone 6加發布後，狀況又有新的變化。再次比較全部iPhone機型。

機型	屏幕寬高，單位點	屏幕模式	屏幕對角線長度
iPhone 3GS的	320×480	1X	3.5英寸
iPhone 4	320×480	2倍	3.5英寸
iphone 5	320×568	2倍	4英寸
iPhone 6	375點¯x667	2倍	4.7英寸
iPhone 6加	414×736	3倍	5.5英寸

屏幕尺寸再度分裂。可是咱們比較iPhone 5的跟iPhone 6的寬高比例。

機型	屏幕寬高比
iphone 5	320÷568 = 0.563
iPhone 6	375÷667 = 0.562
iPhone 6加	414÷736 = 0.5625

能夠看出，iPhone 6跟iPhone 5雖然屏幕尺寸改變了，可是它們的比例是不變的。都是9÷16 = 0.5625的屏幕。

當舊的iPhone 5的程序運行在iPhone 6上面，假如沒有通過適配。舊程序自動等比放大，鋪滿新手機，舊程序也能夠正常運行。這種方案可算是自動適配。但由於舊程序拉伸了，總體看起來有點虛，也不能更好利用大屏空間。

當須要開發者手動適配的時候，跟iPhone 4過渡到iPhone 5同樣，在新程序中，指定一張新的啓動圖片。當指定了啓動圖，屏幕分辨率就已經變成應有的大小，這時候利用AutoLayout進行佈局，同一份代碼，就能夠支持多個機型。新手機的屏幕更大，有更多的虛擬點，能夠顯示更多的內容。

值得注意一點是，iPhone 6加。它的寬高是414×736個點，3個模式，理想上來講，應該有1242×2208像素。但iPhone 6加的實際像素是1080×1920，是比理想值要少一點的.iPhone 6 Plus的處理方式是將程序總體稍微縮小一點。分辨率很高，這點區別，實際上也看不出來。

那爲何須要這樣作呢？上面表格中iPhone 6，iPhone 6 Plus屏幕寬高的邏輯點的數字是怎麼來的？下面我猜想一下緣由，但不能證明。

先看iPhone 6，這個比較簡單.iPhone 6的屏幕寬高比例跟iPhone 5同樣，使用對角線來計算，就是放大了4.7÷4 = 1.175倍。用這個數字，乘以iPhone 5的的320×568個點，忽略偏差，差很少就是iPhone 6屏幕的375點¯x667個點。這裏須要注意，屏幕寬高比例同樣，才能使用對角​​線來計算。

按照上面的方式來計算iPhone 6此外，應該是獲得440點¯x781個點，實際上倒是414×736個點。這裏我猜想是由於，iPhone 6 Plus屏幕明顯更大，相同尺寸的點放在大的屏幕上面，會使得人感受尺寸變小，因此就將每一個點的實際尺寸放大一些，從而獲得更少的點數目。人眼看東西會有種錯覺，並不是是孤立地看，而是會跟周圍的環境做比較。

肯定了點數目以後，再肯定了像素1080× ×2208,3x下也能夠精確到1：1，

上述只是猜想，我相信那些手機參數是通過反覆考慮再肯定的.iPhone 6加這個處於手機跟平板中間地帶的產物通過很多特殊處理。

由分析能夠看到，慢慢的爲了適配多個機型，程序的啓動圖片也逐漸增多，爲解決這個問題。iOS 8以後，可使用xib來搭建啓動界面，這樣就能夠同一個啓動界面，適配多個機型，減小啓動圖片佔用的空間。

建議

• 之後的應用程序，都使用自動版式，不要再用絕對定位。

• 使用相似網頁的方式來設計界面。

• 設計師好，程序員也好，儘可能使用點這個單位進行思考，而不要使用像素。好比，你須要作44 X 66個點的按鈕​​，2個模式，就乘以2， 3x模式就乘以3。這樣的思考方式能夠大體估計到真實的物理長度。44個點，就是手機上導航欄，工具欄的高度。假如用像素思考，容易使得作出的圖片過大或者太小。

• 非矢量素材，就能夠作尺寸最大的，以後再進行縮小。好比你須要兼容3x的屏幕，就直接作最高那種圖片。

• 而當使用Flash之類的矢量工具來作素材的時候，應該直接作點那個尺寸。好比44 X 66個點的按鈕​​。就創建一個44點¯x 66的場景。以後再導出成2倍圖，3倍圖，由於矢量放大不失真。不要創建一個3x的場景，導出成大圖片，再進行縮小，這樣就容易失真。更理想的是直接使用矢量圖。

• 假如是那種導航欄，工具欄之類的背景圖，須要橫跨整個屏幕。能夠只切一小塊，讓程序拉伸，拉伸方式是保持兩邊的像素不動，只拉伸最中間的一列像素。須要拉伸的話，橫方向就不要出現一些漸變色。

• 按鈕的點擊區域，不該該少於44個點，就算按鈕的圖片看起來比較小，也應該使得點按鈕周圍的透明區也有反應。

• 5，能夠按照iPhone 5的尺寸，320×568個點，須要兼容iPhone 6 6加的橫屏模式，須要另外處理。

• 上面說的是應用的處理方式，遊戲會有些特殊。暫時如今不少遊戲，按照1136點¯x 1X模式下尺寸是1024×768像素，iPhone 5在2倍模式下，是1136×640。這種尺寸，能夠簡單將場景居中顯示，各自將場景拉伸到最大