http://blog.csdn.net/phunxm/article/details/42174937 1.iPhone尺寸規(guī)格
2.單位inch(英吋)1 inch = 2.54cm = 25.4mm 3.iPhone手機(jī)寬高上表中的寬高(width/height)為手機(jī)的物理尺寸,,包括顯示屏和邊框。 以下為iPhone4s的寬高示意圖: 4.屏幕尺寸 我們通常所說(shuō)的iPhone5屏幕尺寸為4英寸,、iPhone6屏幕尺寸為4.7英寸,,指的是顯示屏對(duì)角線的長(zhǎng)度(diagonal)。 以下為iPhone5~6+的屏幕尺寸規(guī)格示意圖: 5.像素密度PPIPPI(Pixel Per Inch by diagonal):表示沿著對(duì)角線,,每英寸所擁有的像素(Pixel)數(shù)目,。 PPI數(shù)值越高,代表顯示屏能夠以越高的密度顯示圖像,,即通常所說(shuō)的分辨率越高,、顆粒感越弱。 根據(jù)勾股定理,,可以得知iPhone4(s)的PPI計(jì)算公式為: 計(jì)算結(jié)果稍有出入,,這是因?yàn)橄袼氐碾x散采樣有鋸齒效應(yīng)。 6.縮放因子(scale factor between logic point and device pixel)(1)Scale起源早期的iPhone3GS的屏幕分辨率是320*480(PPI=163),,iOS繪制圖形(CGPoint/CGSize/CGRect)均以point為單位(measured in points): 1 point = 1 pixel(Point Per Inch=Pixel Per Inch=PPI) 后來(lái)在iPhone4中,,同樣大小(3.5 inch)的屏幕采用了Retina顯示技術(shù),,橫,、縱向方向像素密度都被放大到2倍,像素分辨率提高到(320x2)x(480x2)= 960x640(PPI=326),, 顯像分辨率提升至iPhone3GS的4倍(1個(gè)Point被渲染成1個(gè)2x2的像素矩陣),。 但是對(duì)于開(kāi)發(fā)者來(lái)說(shuō),iOS繪制圖形的API依然沿襲point(pt,,注意區(qū)分印刷行業(yè)的“磅”)為單位,。在同樣的邏輯坐標(biāo)系下(320x480): 1 point = scale*pixel(在iPhone4~6中,縮放因子scale=2,;在iPhone6+中,,縮放因子scale=3)。 可以理解為: scale=絕對(duì)長(zhǎng)度比(point/pixel)=單位長(zhǎng)度內(nèi)的數(shù)量比(pixel/point) (2)UIScreen.scaleUIScreen.h中定義了該屬性: // The natural scale factor associated with the screen.(read-only) @property(nonatomic,readonly) CGFloat scale NS_AVAILABLE_IOS(4_0); -------------------------------------------------------------------------------- This value reflects the scale factor needed to convert from the default logical coordinate space into the device coordinate space of this screen. The default logical coordinate space is measured using points. For standard-resolution displays, the scale factor is 1.0 and one point equals one pixel. For Retina displays, the scale factor is 2.0 and one point is represented by four pixels. -------------------------------------------------------------------------------- 為了自動(dòng)適應(yīng)分辨率,,系統(tǒng)會(huì)根據(jù)設(shè)備實(shí)際分辨率,,自動(dòng)給UIScreen.scale賦值,該屬性對(duì)開(kāi)發(fā)者只讀,。 (3)UIScreen.nativeScaleiOS8新增了nativeScale屬性: // Native scale factor of the physical screen @property(nonatomic,readonly) CGFloat nativeScale NS_AVAILABLE_IOS(8_0); 以下是iPhone6+下的輸出,,初步看來(lái)nativeScale與scale沒(méi)有太大區(qū)別: -------------------------------------------------------------------------------- (lldb)p (CGFloat)[[UIScreen mainScreen] scale] -------------------------------------------------------------------------------- (4)機(jī)型判別在同樣的邏輯分辨率下,可以通過(guò)scale參數(shù)識(shí)別是iPhone3GS還是iPhone4(s)。以下基于nativeScale參數(shù),,定義了探測(cè)機(jī)型是否為iPhone6+的宏: -------------------------------------------------------------------------------- // not UIUserInterfaceIdiomPad -------------------------------------------------------------------------------- 那么,,同樣的分辨率和scale,如何區(qū)分機(jī)型iPhone4與4s,、iPhone5與5s呢,?通過(guò)[[UIDevice currentDevice] model]只能判別iPhone、iPad,、iPod大類,,要判斷iPhone具體機(jī)型型號(hào),則需要通過(guò)sysctlbyname("hw.machine")獲取詳細(xì)的設(shè)備參數(shù)信息予以甄別,。 7.Resolutions &Rendering8.@2x/@3x以及高倍圖適配(1)@2x@2x means the same “double”retina resolution that we’veseen on all iOS devices with retina displays to date, where each virtual pointin the user interface is represented by two physical pixels on thedisplay in each dimension, horizontal and vertical. iPhone3GS時(shí)代,,我們?yōu)橐粋€(gè)應(yīng)用提供圖標(biāo)(或按鈕提供貼圖),只需要icon.png,。針對(duì)現(xiàn)在的iPhone4~6 Retina顯示屏,,需要制作額外的@2x高分辨率版本。 例如在iPhone3GS中,,scale=1,,用的圖標(biāo)是50x50pixel(logicalimage.size=50x50point);在iPhone4~6中,,scale=2,,則需要100×100pixel(logical image.size=50x50point,乘以image.scale=dimensions in pixels),,并且命名為[email protected],。 如果APP要同時(shí)兼容iPhone3GS~iPhone6,則需要提供icon.png/[email protected]兩種分辨率的圖片,。 (2)@3x@3x means a new “triple” retina resolution, where eachuser interface point is represented by three display pixels. A single @2x pointis a 2?×?2 square of 4 pixels; an @3x point is a 3?×?3 square of 9 pixels.” iPhone6+在實(shí)際渲染時(shí),downsampling/1.15(1242x2208->1080x1920),,準(zhǔn)確的講,,應(yīng)該是@2.46x。蘋(píng)果為方便開(kāi)發(fā)者用的是@3x的素材,,然后再縮放到@2.46x上,。 參考:《為什么iPhone 6 Plus要將3x渲染的2208x1242分辨率縮小到1080p屏幕上?》《詳解 iPhone 6 Plus 的奇葩分辨率》《iPhone 6 Plus屏幕分辨率》 如果APP要同時(shí)兼容iPhone3GS~iPhone6+,,則需要提供icon.png/[email protected]/[email protected]三種分辨率的圖片,。 需要注意的是,iOS APP圖標(biāo)的尺寸和命名都需要遵守相關(guān)規(guī)范,。 (3)高倍圖文件命名 對(duì)于iPhone3,、4/5/6、6+三類機(jī)型,,需要按分辨率提供相應(yīng)的高倍圖并且文件名添加相應(yīng)后綴,,否則會(huì)拉伸(stretchable/resizable)失真(模糊或邊角出現(xiàn)鋸齒),。 9.Screen Bounds & Application Frame(1)UIScreen.bounds// Bounds of entire screen in points(本地坐標(biāo)系,起點(diǎn)為[0,0]) @property(nonatomic,readonly) CGRect bounds; -------------------------------------------------------------------------------- //考慮轉(zhuǎn)屏的影響,,按照實(shí)際屏幕方向(UIDeviceOrientation)的寬高 #define SCREEN_WIDTH ([UIScreenmainScreen].bounds.size.width) #define SCREEN_HEIGHT ([UIScreenmainScreen].bounds.size.height) #define STATUSBAR_HEIGHT ([UIApplicationsharedApplication].statusBarFrame.size.height) //不考慮轉(zhuǎn)屏的影響,,只取豎屏(UIDeviceOrientationPortrait)的寬高 #define SCREEN_WIDTH MIN([UIScreenmainScreen].bounds.size.width, [UIScreenmainScreen].bounds.size.height) #define SCREEN_HEIGHT MAX([UIScreenmainScreen].bounds.size.height, [UIScreenmainScreen].bounds.size.width) #define STATUSBAR_HEIGHT MIN([UIApplicationsharedApplication].statusBarFrame.size.width, [UIApplicationsharedApplication].statusBarFrame.size.height) -------------------------------------------------------------------------------- (2)UIScreen.nativeBoundsiOS8新增了nativeBounds屬性,,輸出豎屏像素級(jí)分辨率: // The bounding rectangle of the physical screen,measured in pixels. (read-only) @property(nonatomic,readonly) CGRect nativeBounds NS_AVAILABLE_IOS(8_0); 以下是iPhone6+下的輸出: -------------------------------------------------------------------------------- (lldb) poNSStringFromCGRect([(UIScreen*)[UIScreen mainScreen] bounds]) -------------------------------------------------------------------------------- (3)UIScreen.applicationFrame// Frame of application screen area in points (i.e.entire screen minus status bar if visible) // bounds除去系統(tǒng)狀態(tài)欄 @property(nonatomic,readonly) CGRect applicationFrame; -------------------------------------------------------------------------------- // APPFRAME_WIDTH=SCREEN_WIDTH #define APPFRAME_WIDTH ([UIScreen mainScreen].applicationFrame.size.width) // APPFRAME_HEIGHT=SCREEN_HEIGHT-STATUSBAR_HEIGHT //注意:橫屏(UIDeviceOrientationLandscape)時(shí),,iOS8默認(rèn)隱藏狀態(tài)欄,此時(shí)APPFRAME_HEIGHT=SCREEN_HEIGHT #define APPFRAME_HEIGHT ([UIScreen mainScreen].applicationFrame.size.height) -------------------------------------------------------------------------------- (4)bounds和frame的區(qū)別下圖展示了bounds和frame的區(qū)別: 10.機(jī)型尺寸適配(Screen Scale Adaption)從iPhone3GS/iPhone4(s)過(guò)渡到iPhone5(s)時(shí),,在邏輯上寬度不變高度稍高,,之前舊的素材和布局通過(guò)AutoresizingFlexible簡(jiǎn)單適配即可運(yùn)行得很好,但由于高寬比增大,,上下兩端出現(xiàn)黑粗邊(典型如LaunchImage),。從分辨率的角度來(lái)看,除了需要提供LaunchImage這種滿屏圖,其他基本沿用二倍圖(@2x),;從屏幕尺寸角度來(lái)看,,需要對(duì)縱向排版略加調(diào)整。 從iPhone5(s)發(fā)展到iPhone6(+),,由于高寬比保持不變,,iOS對(duì)圖標(biāo)、圖片,、字體進(jìn)行等比放大自適應(yīng),,清晰度會(huì)有所降低。同時(shí),,絕對(duì)坐標(biāo)布局會(huì)導(dǎo)致在大屏下出現(xiàn)偏左偏上的問(wèn)題,。從分辨率的角度來(lái)看,iPhone6沿用二倍圖(@2x),,但需為iPhone6+提供更高的三倍圖(@3x),;從屏幕尺寸角度來(lái)看,需要重新對(duì)UI元素尺寸和布局進(jìn)行適配,,以期視覺(jué)協(xié)調(diào),。 (1)按寬度適配我們先來(lái)看一下iPhone4~6(+)的屏幕高寬比: iPhone4(s):分辨率960*640,高寬比1.5 (2)按高度適配 在同樣的寬度下,,iPhone4(s)的屏高比iPhone5(s)低,若縱向排版緊張,,可以iPhone5(s)為基準(zhǔn),,按高度適配: 這里需要注意iPhone/iOS雙環(huán)上網(wǎng)的熱點(diǎn)欄對(duì)縱向布局的影響:iPhone作為個(gè)人熱點(diǎn)且有連接時(shí),系統(tǒng)狀態(tài)欄下面會(huì)多一行熱點(diǎn)連接提示欄"Personal Hotspot: * Connection",,縱向會(huì)下壓20pt,,[UIApplication sharedApplication].statusBarFrame高度變?yōu)?span style="color: rgb(255, 0, 0);">40pt;當(dāng)所有連接都斷開(kāi)時(shí),,熱點(diǎn)欄消失,,縱向高度恢復(fù)正常為20pt。詳情可參考《iPhone/iOS開(kāi)啟個(gè)人熱點(diǎn)的縱向適配小結(jié)》,。 (3)按字體適配 另外,,iPhone的【設(shè)置】【通用】【輔助功能】中可以設(shè)置調(diào)節(jié)【更大字體】,APP也可以按字號(hào)適配: 對(duì)于縱向也不支持滑動(dòng)的視圖,在屏幕可見(jiàn)視區(qū)內(nèi)排版時(shí),,最好不要隨字號(hào)縮放,,否則可能超出既定寬高。 11.UI相對(duì)布局考慮到iPhone機(jī)型的多樣性,,不可能針對(duì)iPhone4(s),、5(s)、6,、6+四種屏幕尺寸出四套視覺(jué)交互稿,,也不要基于某一機(jī)型從上往下、從左往右給絕對(duì)標(biāo)注,,而應(yīng)該關(guān)注subView在superView中的相對(duì)位置(EdgeInsets/Frame/Center)以及siblingView之間的偏移(Offset),,盡量給出適合Autolayout的相對(duì)布局比例(理想情況是只給百分比)。假如交互按照iPhone5(s)下絕對(duì)標(biāo)注,,則在iPhone4(s)上可能擠出屏幕底部,,而在iPhone6(+)上則可能橫向偏左或縱向偏上。 開(kāi)發(fā)人員基于與屏幕邊緣的間距(Margin/EdgeInsets),,定位邊緣處的控件(釘釘子)作為參照,,然后基于控件尺寸和間隙進(jìn)行相對(duì)計(jì)算排版,。這樣,若釘子移動(dòng),,相鄰控件將順向偏移,,不會(huì)因?yàn)榫植空{(diào)整而出現(xiàn)凌亂。 蘋(píng)果在WWDC2012 iOS6中就已提出了Auto Layout的概念,,即使用約束條件來(lái)定義視圖的位置和尺寸,,以適應(yīng)不同尺寸和分辨率的屏幕。 12.DEPRECATED API適配最后,,除了對(duì)屏幕尺寸和分辨率進(jìn)行適配之外,,還需對(duì)iOS SDK中相關(guān)的DEPRECATED API進(jìn)行適配。典型的如: (1)UILineBreakMode->NSLineBreakMode (5)... 參考: 《iOS設(shè)備的屏幕尺寸,、分辨率及其屏幕邊長(zhǎng)比例》 |
|
來(lái)自: 久辰堡 > 《iOS開(kāi)發(fā)總結(jié)》