iPhone6和iPhone6p的屏幕分辨率變化及適配

iPhone6的物理尺寸比5s放大了17.5%,同樣物理分辨率也增加了17.5%,從1136* 640提升到1334* 750,這樣同比的增長結果就是像素密度ppi與5s保持不變,依然是326ppi(4s也是這個值),也就是說6跟5s相比,屏幕的清晰度不變,只是尺寸變大了。如果針對5s用像素定位布局做出來的app界面,尤其是依賴568和320這兩個數字的界面,很可能出現右邊和下邊出現空白,因為邏輯分辨率變成了667* 375。

舊的應用不做適配的話,兼容的解決方案是等比放大模式,也就是將原來以568* 320為參考系的界面,所有的邏輯點位置* 1.175對應到667* 375之下。而想使用非兼容模式需要通過設置667* 375對應的開屏圖或者launch.storyboard來顯示告訴操作系統使用非等比放大模式。

而到了iPhone6p就又有一點不一樣了,因為6p的分辨率1920* 1080,與5s和6相比,其分辨率的增長比率超過了屏幕物理尺寸的增長比例,導致像素密度ppi有顯著增長,從326增加到401,也就是說不但屏幕尺寸變大了,清晰度也提高了,而且清晰度的提高大于屏幕尺寸的提高率。

從程序開發的角度來看,6和6p如果不做適配,程序肯定會不適應,其實每一代iPhone革新都需要做app適配嘛。但這一代的工作量最大。因為適配通常有兩方面工作:一是頁面布局的調整,二是圖標尺寸的調整。

3->4的時候屏幕尺寸沒變,只有清晰度變了,所以頁面布局不用調整(布局是基于點——邏輯分辨率的,不是基于像素——物理分辨率的),只需要把素材圖標的像素*2變成@2x,這樣看起來整個頁面布局還跟以前一樣,只是圖片和圖標變得更清晰了。

4->5的時候屏幕尺寸變了(寬度沒變,只有高度增加了),增加了豎向的空間,但是清晰度沒變,所以頁面布局需要調整(不調整的話老的應用是居中顯示,屏幕上下會留黑,這就是5對4的兼容模式),但調整起來應該也很容易,只需要讓豎向顯示更多的內容或者把原來的內容在豎向拉開間距即可。素材圖標還是@2x不用調整,同樣的圖標在手機上顯示出來,依然是跟3和4的時候一樣大。

5->6的時候屏幕尺寸變了(橫向和豎向都增加了),但是清晰度沒變,所以跟上一條一樣只需要調整布局,唯一不同的是4->5只需要調整豎向布局,5->6橫向豎向都有增加的空間都需要調整。所以在這次的兼容模式也跟4->5有區別了,因為兼容模式的原則是保持等比,4->5的時候只有一個維度增加了,所以豎向居中就可以了,但5->6的時候兩個方向都增加了,而且是等比增加的,那么兼容模式就不是4周都留黑邊了,而是采用了放大的方式,又因為5->6屏幕分辨率是等比放大,故兼容模式把界面等比放大以后,依然是充滿屏幕,只是圖標的物理面積增加大,清晰度也變低了一點而已。

5->6p的時候屏幕尺寸和清晰度都變了。所有不但要調整布局,還要重新做素材圖標的清晰度,改成@3x的分辨率。如果不調整的話,那不但右邊和下邊會留空或者留黑,而且原來的布局的圖標物理尺寸也比以前的小了(圖標分辨率尺寸沒變,但是6p的ppi增大了,導致物理尺寸變小)。

而6和6p是一起出的,而且屏幕尺寸還不一樣,所以開發要同時兼顧這兩種調整,工作量比以前都要大。然后好消息是Xcode為了今后考慮推出了Autolayout自動布局,通過設置不同頁面空間之前的約束關系來簡化實現,不必對所有的頁面都進行適配硬編碼,這次對布局的調整完成以后,今后屏幕尺寸再變化需要做的工作量就少多了,甚至沒有。(其實針對每種屏幕尺寸繼續做硬編碼也沒關系,iPhone的機型畢竟還是有限的,要是換到Android不用自動布局都不行。)

另外不做適配的情況下,舊的應用會顯示的像老人機那樣放大,這是蘋果硬件設計上為了舊應用的兼容策略,并且6和6p也并不是第一次采用放大策略,實際上從iPhone4的163ppi提升到iPhone4S的326 retina ppi,其放大策略更是直接放大了2倍,只不過是由于屏幕尺寸沒變,所以前后對比沒有變化而已。另外,不管是6的1334* 750,還是6p的1920* 1080,其高寬比都是1.78,跟iPhone5s的1136* 640下的高寬比是一致的,也就是說以前程序的布局,在不做適配的情況下,只要等比拉伸顯示即可填充滿6和6p的全屏幕,但結果也就是每個顯示單元不但變大,而且變模糊了,尤其是在6p下更明顯,因為拉伸的幅度大得多。

說了這么多基本還是理論方面,至于程序上要怎么做,一圖勝千言,看懂下面這個圖基本上對iPhone適配布局就能完全游刃有余了。The Ultimate Guide To iPhone Resolutions

歷代iPhone屏幕尺寸變化及適配

----------------------------更新--------------------------
iPhone X要出了,又多了一個適配項目。根據官方適配指南,iPhone的邏輯像素是375* 812,采用3x轉換關系。那么物理像素應該為1125* 2436,根據這個長寬物理像素計算出對角線物理像素為2683,而iPhone又聲稱其屏幕物理尺寸為5.8英寸,則其像素密度為2683/5.8=462,比之前6p的401又增加了不少,難怪這次的屏幕叫做super retina超視網膜屏幕。

但按照方便喬幫主對iPhone4s retina的解釋,ppi超過326就已經無法被視網膜分辨了、那么再進一步提高ppi的意義何在?或者說,ppi并沒有提高,而是像6p一樣在顯示1126* 2436這個尺寸圖像之前又經過down sample處理了?查了一下資料,iPhone X公布出來的ppi是458,那么反算一下2683/458=5.85,也就是說iPhone X的實際屏幕尺寸是5.85英寸。

而關于retina和ppi超過300肉眼無法分辨這個結論,基本可以斷定為喬幫主為了給iPhone4S和iPad3的宣傳炒作造勢而故意營造出來的說法,根據其他一些權威專家的說法,人類肉眼能夠分辨的ppi極限應該在500左右,也就是說現在的手機基本快接近極限了。

最后,屏幕上端的劉海也不是隨便來的,三個圓相切也很有美感的嘛。。。

洋氣的劉海
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,967評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,273評論 3 415
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,870評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,742評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,527評論 6 407
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,010評論 1 322
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,108評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,250評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,769評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,656評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,853評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,371評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,103評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,472評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,717評論 1 281
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,487評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,815評論 2 372

推薦閱讀更多精彩內容