1. 程式人生 > >iOS開發--------螢幕尺寸適配

iOS開發--------螢幕尺寸適配

螢幕尺寸適配

 2007 年,初代 iPhone釋出,其擁有 3.5寸螢幕,執行 iPhone OS X。在後續幾年中Apple 陸續釋出了 iPhone 3GS,iPhone 4,iPhone 4S,iPhone 5C,iPhone 5S,iPhone 6,iPhone 6 Plus,iPhone 6S、iPhone 6S Plus,iPhoneSE ,iPhone7,iPhone7 Plus, 2017年9月將釋出iphone 8。其執行的作業系統也從 iOS 4、iOS 5、iOS 6、iOS 7 、iOS 8, iOS 9,iOS10,iOS11。隨著新版 iPhone,新版iOS作業系統的上市,隨著維護的iPhone和IOS版本增多,如何確保 App適配新版iPhone及iOS作業系統?而這又是必須解決的問題,否則App將喪失新版iPhone新版iOS 系統上的使用者,從而帶來巨大的損失。          Apple 提供的解決方案之一就是:引入了點(point)的概念。在 iPhone 3GS 中, 1個點對應1個畫素,點和畫素兩者在數值上是一致的。在iPhone 4/4S中,雖然機型變化,其熒幕寬高畫素點增加了,但是其寬高點座標是不變的。所以在開發過程中可以使用點絕對座標,用來確定檢視的位置。同時提供兩套圖片: ~.png 和

[email protected]。 iOS 系統將根據 iPhone 的畫素來自動決定使用哪一張圖片。 

機型 螢幕尺寸 螢幕寬高(畫素) 螢幕寬高(點) 模式
iPhone 3GS 3.5 320x480 320 x 480 1x
iPhone 4 3.5 640 x 960 320 x 480 2x
iPhone 4S 3.5 640 x 960 320 x 480 2x
iPhone 5 4 640 x 1136 320 x 568 2x
iPhone 5C 4 640 x 1136 320 x 568 2x
iPhone 5S 4 640 x 1136 320 x 568 2x
iPhone 5SE 4 640 x 1136 320 x 568 2x
iPhone 6 4.7 750 x 1134 375 x 667 2x
iPhone 6 Plus 5.5 1080 x 1920 414 x 736 2.6x
iPhone 6S 4.7 750 x 1134 375 x 667 2x
iPhone 6S Plus 5.5 1080 x 1920 414 x 736 2.6x
iPhone 7 4.7 750 x 1134 375 x 667 2x
iPhone 7 Plus 5.5 1080 x 1920 414 x 736 2.6x

 在iPhone5/5C/5S中,其熒幕,畫素以及點,都已經發生變化。相比iPhone4/4S, 其熒幕寬度不變,高度增加88個點。在這種情況下,就不能再使用絕對座標,否則將導致程式高度不夠。如果App沒有對其做適配處理,iOS 將對88個點均分為上下兩部分,熒幕上下各出現44個點的黑邊。在不同機型上,熒幕點座標改變了,於是再也不能使用絕對座標。為了徹底解決這個問題,iOS提出了一種新技術AutoLayout。使用AutoLayout技術,將不使用絕對座標,而是指定View,button,TextField之間的相對位置,比如靠左多少,靠右多少,相距多少等。通過指定這一系列的約束條件,AutoLayout在熒幕上自動的畫出對應佈局。在iPhone5/5C/5S中,由於畫素:點的比例仍為2,所以將直接使

[email protected] 圖片即可。如果沒有提供[email protected]的圖片,那麼就直接使用~.png的圖片覆蓋同樣的點。雖然點的數量一樣,但是畫素點卻多了1倍,以致在這種情況下,圖片顯示會比較模糊。在iPhone6面世後,其熒幕大小座標已經變化,寬,高都增加了。但是寬,高比不變,為9:16。而且其畫素:點比仍然為2。在2x和3x的圖片都不太合適。iOS的解決方案是:現有的銀幕解析度明顯超過2x但沒有達到3x,於是想象一個滿足3x的銀幕總可以吧?         於是App在iPhone 6 Plus上執行的時候,iOS會騙App說,App現在執行在一個 3x的熒幕上,其畫素為1242x2208,點為414 x 736,而且都比iPhone 6要大。於是程式設計師和UED也按照3x來設計。UED 提供 3x 的高清圖片,程式設計師依據414 x 736 來編寫App。但是借來的總是要還的。iOS 在拿到這個假想 1242x2208 的繪製結果,再縮小到實際 1080 x 1920 熒幕來畫圖(通過某種縮小演算法)。於是在 iPhone 6 Plus熒幕上看到的永遠是縮小的影象。通過3x模式,使得設計開發過程得到了大大的簡化。

CPU 指令集

機型 ARM 架構
iPhone 3GS ARM V6
iPhone 4 ARM V7
iPhone 4S ARM V7
iPhone 5 ARM V7S
iPhone 5C ARM V7S
iPhone 5S ARM V8(64)
iPhone 6 ARM V8(64)
iPhone 6 Plus ARM V8(64)
iPhone 6S ARM V8(64)
iPhone 6S Plus ARM V8(64)
iPhone 5SE ARM V8(64)
iPhone 7 ARM V8(64)
iPhone 7 Plus ARM V8(64)

指令集是向後相容的。比如ARMV7S指令集下生成的二進位制包,可以執行在iPhone 6上,只是有些優化不可用,效率沒有那麼高而已。反之,ARM V8生成的二進位制包, 就不能在 ARM V7S的iPhone 5上。 在編譯二進位制包的時候,需要確認其所能支援的ARM架構。如果希望App在各版iPhone上都能夠高效執行,則需要將Build Active Architecture Only改為NO,Valid architectures選擇對應的指令集:ARM V7 ARM V7S ARM 8。為各個指令集編譯對應的程式碼,因此最後的ipa包的體積基本翻了3倍。如果希望App體積保持最小, 則現階段應該選Valid architectures為ARM V7,這樣Build Active Architecture Only選YES或NO就無所謂了。在ARM V8上,最明顯的一個區別就是支援64-bit。於是在iOS上的資料型別發生了變化。資料長度的改變給App帶來的影響之一就是: 當把一個值從大的資料型別拷貝到小的資料型別,資料可能被截斷,例如從NSInteger 轉換到int。

圖1.pngArchitecture :指你想支援的指令集。Valid architectures :指即將編譯的指令集。Build Active Architecture Only : 只是否只編譯當前適用的指令集。

圖2.png

iOS 系統

每次iPhone機型的升級,往往同時伴隨著新版iOS系統的釋出。最開始的iPhone OSX,其創新的多點觸控操作和極簡的使用者體驗受到了使用者的追捧。雖然初代的系統還存在各種各樣的問題,比如無法複製貼上等,但是它開啟了移動裝置作業系統的新時代。隨著iOS 4增加了對Retina和多工的支援,iOS 5帶來了Siri 語音助手,iOS 6引入了全新的地圖,iOS 7全新的扁平化圖示介面設計,到iOS 8開始支援的Touch ID,iOS 9 Watch OS 2、App Thinning、3D Tought、分屏多工,iOS系統在不斷的更新(當然每次iOS系統的迭代更新,其對應的SDK也被推向開發人員)。釋出上線的 App,必須考慮到對不同版本iOS系統的適配。因為在某一個特定時間點,並不是所有的使用者都在最新版本的作業系統,比如有些使用者在使用iOS 8,但總還是有一些使用者停留在iOS 7,iOS 6甚至iOS 5。舉例來說,相對 iOS 7 而言,iOS 8 中對內建相機做了改動----自由調節進光量,在拍攝中,觸控式螢幕幕對好焦點後,會在對焦框旁邊出現進光量調節軸,增加或降低拍攝的曝光量,從而不必因為光的問題頻繁找焦點測光了。值得注意的是::App AliExpress.com使用了呼叫了iOS拍照的功能,且其在iOS 7上工作中正常。在安裝該App的iPhone升級為iOS 8之後,需要驗證App的拍照功能是否工作正常, 確認其沒有受到 iOS 8 拍照功能改動的影響。與之類似,和 iOS 7相比,iOS 8還有一些新功能,比如開放支援第三方輸入法;鎖屏推送中直接操作,而並不需要開啟資訊應用;多人群聊,實時位置共享,還可以傳送語音和視訊訊息。根據這些iOS 8新功能,評估其對App風險。再而一一測試App上對應的功能。只有這些點都被測試通過之後,才能夠宣佈該App已經適配了iOS 8。

iOS系統 iOS各版本市場佔比 與前版本主要不同之處
iOS 7 < 8% 1. 重新設計的視覺介面,扁平化檔案系統
2. 全新的控制中心從下側邊緣滑出控制中心
3. 全新的MultiTasking設計,App預覽及App關閉方式
4. 通知中心,鎖屏下可以檢視推送
5. Safari 升級,包括支援全熒幕瀏覽,左右切換等
6.其他多項新功能
iOS 8 15% 1. 相機延時拍照,進光量調節
2. QuickType及第三方輸入法
3. 互動式通知中心
4. Safari升級,向外切換到書籤,分享連結
5. 即時聊天,群聊,位置分享,分享視訊等 
6. 其他多項新功能
iOS 9 77% 1. 3D Tought
2.應用內搜尋
3. App Watch OS 2.0支援
4. BitCode App瘦身
5. App Transport Security(ATS) 
iOS 9 77% 1. 3D Tought
2.應用內搜尋
3. App Watch OS 2.0支援
4. BitCode App瘦身
5. App Transport Security(ATS) 

開發策略

瞭解iPhone裝置,iOS系統的適配原理,有益於App的開發。 在App開發階段,將適配性作為程式碼的規範之一。從而能夠在源頭改善程式碼質量,提高App質量,降低App適配風險。其指導性策略如下: 1、佈局相關:不使用絕對座標,建議使用第三方(Masonry)進行相對位置設定。 2、通過點的概念,而不使用畫素,來統一思考不同機器上的適配,為適配創造良好的基礎。 比如要在view裡面畫一個44x44個點的按鈕,2x模式,就乘以2,3x模式就乘以3。 3、呼叫系統API之前,需要考慮iOS的版本。 4、特定的API在不同iOS版本中,其功能,引數,返回資料可能有所不同。這些資料在對應的SDK中可以找到詳情。所以在使用這些API之前,需要對這些功能, 引數,返回資料進行特殊處理。 5、iOS的某些特定版本,自身也存在一些bug。這些bug的詳情在Apple Inc.官網www.apple.com中iOS的release document中有披露。在App設計中,要避免踩到iOS特定版本自身的 bug。

測試策略

依據上述的iPhone機型市場佔比可以對其適配性專項進行優先順序排序。市場佔比最多的iPhone 5S,iPhone 6的優先級別最高,依次為 iPhone 5/5C,iPhone 6 Plus等。優先級別最低為iPhone 4S。在這些級別中,主要注意機型之間不同尺寸熒幕所帶來的差別,包括解析度,畫素的不同。在App安裝到這些機型上面後,其UI應該拉昇或者壓縮到滿熒幕,不得出現空白區域或者某些部分不能顯示。UI所對應的功能,與硬體相隔離,而一一工作正常。在編譯二進位制包而選擇指令集,其包在跨機型上工作正常,App對指令集相容。

App 在不同尺寸/解析度/畫素的熒幕手機下,其UI拉昇壓縮滿整螢幕,視覺顯示正常,對應功能正常。 基於不同指令集下編譯的包,安裝在跨機型上工作正常。 在iOS系統適配方面,根據各個iOS系統的改動功能點,和App上與之對應的相關功能, 一一評估其風險並驗證。其中iOS 7和iOS 8之間的系統差異特別明顯,需要特別關注。在App的適配測試中,需要同時考慮 iPhone和iOS系統兩個維度,建議從程式碼層面深層次的分析問題。

相關推薦

iOS開發--------螢幕尺寸

螢幕尺寸適配  2007 年,初代 iPhone釋出,其擁有 3.5寸螢幕,執行 iPhone OS X。在後續幾年中Apple 陸續釋出了 iPhone 3GS,iPhone 4,iPhone 4S,iPhone 5C,iPhone 5S,iPhone 6,iPhon

iOS字型根據不同螢幕尺寸

因為檢視使用storyboard 和 XIB拖拽進來了,如果需要對不同大小的螢幕進行Font 字型適配的話可以使用分類。 在load 方法中 利用OC的執行時機制,對所有的 UIButton 、UILabel 做處理。 關鍵程式碼: UIButton 按鈕的處理方式 

IOS開發】iPhoneX wkWebView螢幕下方有間隙的問題

在iPhoneX適配時,wkWebView會出現螢幕下方有一定間距的情況,大約是螢幕底部到安全區(safe area)的距離。此時可以用以下方法解決。 if(@available(iOS 11.0,

iOS開發-iPhoneX的-iPhoneX螢幕分享

文章感謝 PingWest品玩,奇點開發者@圖拉鼎 iOS 11正式釋出,原本bate版就很多坑,現在還沒解決就正式釋出了~內心也是酸爽的。除了程式碼上的坑,更惡劣的就是新的iPhone咯,看到iPhone8和8P的時候內心還算不錯的,不過iPhone X

iOS開發】---- iOS7問題

iOS 7釋出了,適配問題來了,開發者都忙起來了。 先記一個iOS7 的幾個特點: 1.座標:以螢幕左上角為原點(iOS7以前在狀態列或者導航條下) 2.UIScrollView(包括其子類,比如UI

Android快速螢幕尺寸 快速生成 res/dimens.xml

這是java程式碼工具,直接點選執行,不是Application那個執行,是java執行,你懂得。 此程式碼是 package com.ljp.youku.utls; import java.io.BufferedReader; import java.io.Buffe

flutter 螢幕尺寸 字型大小

前言: 現在的手機品牌和型號越來越多,導致我們平時寫佈局的時候會在個不同的移動裝置上顯示的效果不同, 比如我們的設計稿一個View的大小是300px,如果直接寫300px,可能在當前裝置顯示正常,但到了其他裝置可能就會偏小或者偏大,這就需要我們對螢幕進行適配。

IOS開發尺寸

   iPhone裝置物理解析度是硬體所支援的,邏輯解析度是軟體可以達到的。代數裝置作業系統邏輯解析度(point)物理解析度(pixel)螢幕尺寸(對角線長度)縮放因子iPhone第一代iPhone 2GiOS 1320 x 480480 x 3203.5寸1x第二代iPh

rem的正確使用姿勢 -- 完美解決H5頁面不同尺寸螢幕問題

例項程式碼: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=ed

iOS-12 iPhone XS Max 和iPhone XR新螢幕簡單方式

在新的機器釋出之後,我們需要對更大的劉海螢幕做適配,以下是需要新適配的機型: 型號 邏輯尺寸 係數 解析度 iPhone XR 414pt * 896pt @2 828px * 1792

android之螢幕(三)實踐dimens.xml尺寸不同的平板

android3.2以後,為了提供更精準的對佈局檔案的控制,可以通過為資原始檔(res目錄下檔案)增加字尾來指定該資料夾裡的xml佈局檔案或color.xml,string.xml是為哪種大小的螢幕使用。 第一種字尾:sw<N>dp,如layout-sw600

IOS Iphone 6 以及Iphone6 Plus 螢幕

iPhone 6 Plus /iPhone 6S Plus (@3x) iPhone 6 and iPhone 5 /iPhone 6S(@2x) iPhone 4s (@2x) iPad and iPad mini (@2x) iPad 2 and iPad mini (@1x) Table

iOS UIImageView與圖片尺寸大殺器!

[imageView setContentScaleFactor:[[UIScreen mainScreen] scale]]; imageView.contentMode = UIViewContentModeScaleAspectFill; imageView

[ios]關於ios開發圖片尺寸的建議

現在 one 最大 尺寸 應用 支持 場景 設計 使用 1、以後的應用程序,都使用AutoLayout, 不要再用絕對定位。 2、使用類似網頁的方式來設計界面。 3、設計師好,程序員也好,盡量使用點這個單位進行思考,而不要使用像素。比如,你需要做44 x 66個點的按鈕,2

iOS 11 安全區域

table blog header color ntb safe ios 方法 pear //解決iOS11,僅實現heightForHeaderInSection,沒有實現viewForHeaderInSection方法時,section間距大的問題 [UITableV

iOS 11 安全區域總結》

term com phone tabbar ets 安全 而不是 fig tco 本文來自於騰訊Bugly公眾號(weixinBugly),作者:sonialiu,未經作者同意,請勿轉載,原文地址:http://mp.weixin.qq.com/s/W1_0VrchCO50

Andriod界面設計的分辨率和尺寸全攻略 轉載

復雜 分別是 太差 content 基礎 hdp art 發布 一點 Andriod界面設計的分辨率和尺寸適配全攻略 轉載 2016年09月27日 17:45:56 第一、屏幕尺寸: 一般表示是手機的實際物理尺寸,屏幕尺寸指屏幕的對角線的長度,單位是英寸,1英寸

IOS開發尺寸

spl align ipo 區分 拉伸 ebr 限定 trait screens   在移動端或者前端開發中,UI圖通常是帶標註的,指定某個控件的長寬等屬性,一般UI給的是68px,72px這樣的樣式,但是我們在開發過程中通常又並不是完全按照上面的標註去設置值,有時候需要將

Vue+Koa2移動電商實戰 (二)vant元件的引入和移動端螢幕

  這節我們學習如何優雅的引入vant元件和移動端的適配 還是介紹下vant吧, vant是有贊前端提供的vue的一個元件庫,有下面這些優點 1.國人制造的,符合國人審美和互動習慣 2.單元測試超過90%,有些個人的小樣是元件是不做單元測試的 3.支援babel-plugin-impor

從Pc轉向H5開發遇到的問題思考

1.首先說滾動條 移動端開發在不設定任何適配和viewport寬度的情況下,以iphone5為例:螢幕介面的邏輯解析度是320x568,在谷歌瀏覽器的介面下螢幕的可視寬度是980px(谷歌設定的,每個瀏覽器寬度不一樣), 所以介面如果是980可以橫向鋪滿全屏: 如果超過980就會出現滾動條.比如介面寬度