iOS圖檔(@1x @2x @3x) 及Display Zoom大解密
我第一台iPhone 是 裝有iOS4的iPhone 4,，那時只有 1 種尺寸，學起來也很單純，不像Android手機尺寸百百款，圖檔也要分好幾種。。
不過天底下沒有絕對的事情，2014那一年公司app上架前，iPhone尺寸已經有3.5吋、4吋、4.7吋、5.5吋這4種了，自己內心暗自叫苦，app都快要上架了，還來這一招，是要如此是好！還好Apple馬上也端出配套，推出@1x，@2x, @3x圖檔標記方式。
在Apple的iOS Human Interface Guidelines也有明確指出@2x及@3x的用法
接下來就作1個app來實際看看是怎一回事，概念很簡單，就是分別用不同的圖片來代表@1x(黑桃皇后), @2x(紅心皇后), @3x(梅花皇后)的狀態。
先用iPhone 7 Plus 模擬器執行，此時會出現梅花皇后的牌面，表示是@3x狀態，那換成iPhone 6s的模擬器看看，出現紅心皇后的牌面，表示是@2x的狀態，那換成4吋的iPhone SE模擬器看看，猜猜會是@1x還是@2x的狀態呢？答案是@2x。
那要怎麼做才會出現@1x呢？這大概真的要去考古，找出iPhone 3G和iPhone 3GS這骨灰級的手機了XD
Display Zoom (螢幕縮放)
這功能是在推出iPhone 6（解析度1334x750）時提供的新功能之一，在「設定」的「螢幕顯示與亮度」最下面的「螢幕縮放」就明顯告知使用者，
選擇iPhone的顯示畫面。「放大」會顯示較大的控制項目，但「標準」模式可顯示更多內容。
若設定「放大」後，就可以用 iPhone 5（解析度1136x640）為基底來放大，表示所有app的圖示，按鍵及畫面等都比原生的視圖設置變得更大，然而因為所有東西都被放大到了 1334x750，反而會顯得有一些模糊感，這個功能是為那些上了年紀或者是希望閱讀更大的顯示內容的用戶而設的。
以上都是字面上的解釋，也是要來實際操練才會知道這個功能對app有怎樣的影響。
實境演練情況
在下方的圖片，在不切圖的前提下，在三個牌面分別放上3個按鈕，透明度設為0.25，然後用iPhone 6 Plus和iPhone 6S實機測試，在「螢幕縮放」的「標準」及「放大」切換，會是怎樣的畫面呢？
iPhone 6s (4.7吋螢幕)
iPhone 6 Plus (5.5吋螢幕)
有發現了其中的不同嗎？在iPhone 6S切換到「放大」模式後，3個button的位置跑掉了；在iPhone 6 Plus的「標準」模式時，button位置跑掉了，但切換到「放大」模式後，卻是正常，因為我是以4.7吋螢幕的iPhone版面來設定的，所以可以推得初步的結論：
4.7吋螢幕的iPhone在「放大」模式時，會以4.0吋螢幕的解析度在4.7吋螢幕顯示。
5.5吋螢幕的iPhone在「放大」模式時，會以4.7吋螢幕的解析度在5.5吋螢幕顯示。
所以我們再來加6個button分別代表4.0吋螢幕及5.5吋螢幕的位置：
4.0吋螢幕的button背景顏色為黃色。
4.7吋螢幕的button背景顏色為紅色。
5.5吋螢幕的button背景顏色為綠色。
再來實際跑一遍看看。
iPhone 6s (4.7吋螢幕)
iPhone 6 Plus (5.5吋螢幕)
實際做一遍下來後，若可以用程式去抓iPhone機型及螢幕倍率的話，就可以進一步寫判斷要顯示那3個button，就可以解決這個問題了。
一、如何抓iPhone機型
可以寫一個funcation去抓iPhone的Device值，一般來說每款手機上市後都會有對應的Device值，到時候再來補充就好。
二、螢幕倍率
抓到Device值後，再來觀察螢幕倍率，
4.7吋螢幕的iPhone在「標準」模式時，其倍率是2.0，在「放大」模式時，其倍率是2.34375。
5.5吋螢幕的iPhone在「標準」模式時，其倍率是2.608，在「放大」模式時，其倍率是2.88。
該語法為UIScreen.main.nativeScale。
總結以上2個語法，用if-else的邏輯來寫一個判斷式，就可以解決問題了。
不過還是有bug要解，若在模擬器執行的話，跑iPhone 5S時，按鈕位置會跑掉，因為沒有用Auto Layout去做，若真的要解決的話，我自己是會用程式來產生這3個按鈕，不會拉UIButton到Storyboard裡，若你覺得有更好的方法，歡迎提供分享^_^
最後用一張表格作這次主題的總結。
app完整程式專案下載
參考資料：
