iPhone屏幕尺寸奋刽、分辨率及適配

轉(zhuǎn)載自http://blog.csdn.net/phunxm/article/details/42174937


1.iPhone尺寸規(guī)格

設(shè)備

iPhone

Width

Height對角線

Diagonal邏輯分辨率(point)

Scale Factor

設(shè)備分辨率(pixel)

PPI

3GS

2.4 inches (62.1 mm)

4.5 inches (115.5 mm)

3.5-inch

320x480

@1x

320x480

163

4(s)

2.31 inches (58.6 mm)

4.5 inches (115.2 mm)

3.5-inch

320x480

@2x

640x960

326

5c

2.33 inches (59.2 mm)

4.90 inches (124.4 mm)

4-inch

320x568

@2x

640x1136

326

5(s)

2.31 inches (58.6 mm)

4.87 inches (123.8 mm)

4-inch

320x568

@2x

640x1136

326

6

2.64 inches (67.0 mm)

5.44 inches (138.1 mm)

4.7-inch

375x667

@2x

750x1334

326

6+

3.06 inches (77.8 mm)

6.22 inches (158.1 mm)

5.5-inch

414x736

@3x

(1242x2208->)

1080x1920401

2.單位inch(英吋)

1 inch = 2.54cm = 25.4mm

3.iPhone手機寬高

上表中的寬高(width/height)為手機的物理尺寸瓦侮,包括顯示屏和邊框。

以下為iPhone4s的寬高示意圖:

4.屏幕尺寸

我們通常所說的iPhone5屏幕尺寸為4英寸杨名、iPhone6屏幕尺寸為4.7英寸脏榆,指的是顯示屏對角線的長度(diagonal)。

以下為iPhone5~6+的屏幕尺寸規(guī)格示意圖:

5.像素密度PPI

PPI(Pixel Per Inch by diagonal):表示沿著對角線台谍,每英寸所擁有的像素(Pixel)數(shù)目须喂。

PPI數(shù)值越高,代表顯示屏能夠以越高的密度顯示圖像趁蕊,即通常所說的分辨率越高坞生、顆粒感越弱。

根據(jù)勾股定理掷伙,可以得知iPhone4(s)的PPI計算公式為:

計算結(jié)果稍有出入是己,這是因為像素的離散采樣有鋸齒效應(yīng)。

6.縮放因子scale factorbetween 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)

后來在iPhone4中卒废,同樣大信娉(3.5 inch)的屏幕采用了Retina顯示技術(shù),橫摔认、縱向方向像素密度都被放大到2倍逆皮,像素分辨率提高到(320x2)x(480x2)= 960x640(PPI=326),?顯像分辨率提升至iPhone3GS的4倍(1個Point被渲染成1個2x2的像素矩陣)参袱。

但是對于開發(fā)者來說电谣,iOS繪制圖形的API依然沿襲point(pt,注意區(qū)分印刷行業(yè)的“磅”)為單位抹蚀。在同樣的邏輯坐標(biāo)系下(320x480):

1 point = scale*pixel(在iPhone4~6中剿牺,縮放因子scale=2;在iPhone6+中环壤,縮放因子scale=3)晒来。

可以理解為:

scale=絕對長度比point/pixel)=單位長度內(nèi)的數(shù)量比pixel/point)

(2)UIScreen.scale

UIScreen.h中定義了該屬性:

// The natural scale factor associated with the screen.(read-only)

@property(nonatomic,readonly)CGFloatscaleNS_AVAILABLE_IOS(4_0);

--------------------------------------------------------------------------------

This value reflects the scale factor needed to convert from the defaultlogical coordinate spaceinto thedevice

coordinate spaceof this screen.

The default logical coordinate space is measured usingpoints. Forstandard-resolutiondisplays, the scale factor is 1.0 andone point equals one pixel. ForRetinadisplays, the scale factor is 2.0 andone point is represented by four pixels.

--------------------------------------------------------------------------------

為了自動適應(yīng)分辨率,系統(tǒng)會根據(jù)設(shè)備實際分辨率镐捧,自動給UIScreen.scale賦值潜索,該屬性對開發(fā)者只讀。

(3)UIScreen.nativeScale

iOS8新增了nativeScale屬性:

// Native scale factor of the physical screen

@property(nonatomic,readonly)CGFloatnativeScaleNS_AVAILABLE_IOS(8_0);

以下是iPhone6+下的輸出懂酱,初步看來nativeScale與scale沒有太大區(qū)別

--------------------------------------------------------------------------------

(lldb)p (CGFloat)[[UIScreen mainScreen] scale]

(CGFloat) $1 = 3

(lldb) p(CGFloat)[[UIScreen mainScreen] nativeScale]

(CGFloat) $2 = 3

--------------------------------------------------------------------------------

(4)機型判別

在同樣的邏輯分辨率下竹习,可以通過scale參數(shù)識別是iPhone3GS還是iPhone4(s)。以下基于nativeScale參數(shù)列牺,定義了探測機型是否為iPhone6+的宏:

--------------------------------------------------------------------------------

// not UIUserInterfaceIdiomPad

#defineIS_IPHONE(UI_USER_INTERFACE_IDIOM() ==UIUserInterfaceIdiomPhone)

// detect iPhone6 Plus based on its native scale

#defineIS_IPHONE_6PLUS(IS_IPHONE && [[UIScreenmainScreen] nativeScale] == 3.0f)

--------------------------------------------------------------------------------

那么整陌,同樣的分辨率和scale,如何區(qū)分機型iPhone4與4s瞎领、iPhone5與5s呢泌辫?通過[[UIDevice

currentDevice] model]只能判別iPhone、iPad九默、iPod大類震放,要判斷iPhone具體機型型號,則需要通過sysctlbyname("hw.machine")獲取詳細(xì)的設(shè)備參數(shù)信息予以甄別驼修。

7.Resolutions&Rendering

8.@2x/@3x以及高倍圖適配

(1)@2x

@2xmeans 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 bytwophysical pixels on thedisplayin each dimension, horizontal and vertical.

iPhone3GS時代殿遂,我們?yōu)橐粋€應(yīng)用提供圖標(biāo)(或按鈕提供貼圖),只需要icon.png乙各。針對現(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),并且命名為icon@2x.png级乐。

如果APP要同時兼容iPhone3GS~iPhone6幸乒,則需要提供icon.png/icon@2x.png兩種分辨率的圖片。

(2)@3x

@3xmeans a new “triple” retina resolution, where eachuser interface point is represented

bythreedisplay pixels. A single @2x pointis a 2?×?2 square of 4 pixels; an @3x point is a 3?×?3 square of 9 pixels.”

iPhone6+在實際渲染時唇牧,downsampling/1.15(1242x2208->1080x1920),準(zhǔn)確的講聚唐,應(yīng)該是@2.46x丐重。蘋果為方便開發(fā)者用的是@3x的素材,然后再縮放到@2.46x上杆查。

參考:《為什么iPhone 6 Plus要將3x渲染的2208x1242分辨率縮小到1080p屏幕上扮惦?》《詳解iPhone 6 Plus的奇葩分辨率》《iPhone 6 Plus屏幕分辨率

如果APP要同時兼容iPhone3GS~iPhone6+,則需要提供icon.png/icon@2x.png/icon@3x.png三種分辨率的圖片亲桦。

需要注意的是崖蜜,iOS APP圖標(biāo)的尺寸命名都需要遵守相關(guān)規(guī)范。

(3)高倍圖文件命名

對于iPhone3客峭、4/5/6豫领、6+三類機型,需要按分辨率提供相應(yīng)的高倍圖并且文件名添加相應(yīng)后綴舔琅,否則會拉伸(stretchable/resizable)失真(模糊或邊角出現(xiàn)鋸齒)等恐。

以下基于UIImage的兩類初始化API簡介高倍圖的適配:

<1>+imageNamed:該方法使用系統(tǒng)緩存,適合表視圖重復(fù)加載圖像的情形备蚓。同時該API根據(jù)UIScreen的scale课蔬,自動查找包含對應(yīng)高倍圖后綴名(@2x)的文件,如果沒找到設(shè)置默認(rèn)image.scale=1.0郊尝。因此二跋,使用該方法,無需特意指定高倍圖后綴流昏。在實際運行時扎即,系統(tǒng)如果發(fā)現(xiàn)當(dāng)前設(shè)備是Retina屏(scale=2),會自動尋找"*@2x.png"命名格式的圖片,加載針對Retina屏的圖片素材,否則會失真儒鹿。

<2>+imageWithContentsOfFile/+imageWithData:(scale:)/-initWithContentsOfFile:/-initWithData:(scale:)

這組方法創(chuàng)建的UIImage對象沒有使用系統(tǒng)緩存逻翁,并且指定文件名必須包含明確的高倍圖后綴。如果文件名包含@2x后綴了牛,則image.scale=2.0;否則默認(rèn)image.scale=1.0寓辱,同樣對于Retina屏將會失真粮坞。

<3>目前蚊荣,適配iPhone6+時,除了一些鋪滿全屏的大圖(LogoIcon莫杈、LaunchImage)需提供三倍圖互例,其他的小圖仍可沿用原有的二倍圖自適應(yīng)拉伸。

9.Screen Bounds&Application Frame

(1)UIScreen.bounds

// Bounds of entire screen in points(本地坐標(biāo)系筝闹,起點為[0,0])

@property(nonatomic,readonly)CGRectbounds;

--------------------------------------------------------------------------------

//考慮轉(zhuǎn)屏的影響媳叨,按照實際屏幕方向(UIDeviceOrientation)的寬高

#defineSCREEN_WIDTH([UIScreenmainScreen].bounds.size.width)

#defineSCREEN_HEIGHT([UIScreenmainScreen].bounds.size.height)

#defineSTATUSBAR_HEIGHT([UIApplicationsharedApplication].statusBarFrame.size.height)

//不考慮轉(zhuǎn)屏的影響,只取豎屏(UIDeviceOrientationPortrait)的寬高

#defineSCREEN_WIDTHMIN([UIScreenmainScreen].bounds.size.width,

[UIScreenmainScreen].bounds.size.height)

#defineSCREEN_HEIGHTMAX([UIScreenmainScreen].bounds.size.height,

[UIScreenmainScreen].bounds.size.width)

#defineSTATUSBAR_HEIGHTMIN([UIApplicationsharedApplication].statusBarFrame.size.width,

[UIApplicationsharedApplication].statusBarFrame.size.height)

--------------------------------------------------------------------------------

(2)UIScreen.nativeBounds

iOS8新增了nativeBounds屬性关顷,輸出豎屏像素級分辨率:

// The bounding rectangle of the physical screen,measured inpixels. (read-only)

// This rectangle is based on the device in a portrait-up orientation.?This value does not change as the device rotates.

@property(nonatomic,readonly)CGRectnativeBoundsNS_AVAILABLE_IOS(8_0);

以下是iPhone6+下的輸出:

--------------------------------------------------------------------------------

(lldb) poNSStringFromCGRect([(UIScreen*)[UIScreen mainScreen] bounds])

{{0, 0}, {414, 736}}

(lldb) poNSStringFromCGRect([(UIScreen*)[UIScreen mainScreen] nativeBounds])

{{0, 0}, {1242, 2208}}

--------------------------------------------------------------------------------

(3)UIScreen.applicationFrame

// Frame of application screen area in points (i.e.entire screenminusstatus bar if visible)

// bounds除去系統(tǒng)狀態(tài)欄

@property(nonatomic,readonly)CGRectapplicationFrame;

--------------------------------------------------------------------------------

// APPFRAME_WIDTH=SCREEN_WIDTH

#defineAPPFRAME_WIDTH([UIScreen

mainScreen].applicationFrame.size.width)

// APPFRAME_HEIGHT=SCREEN_HEIGHT-STATUSBAR_HEIGHT

//注意:橫屏(UIDeviceOrientationLandscape)時糊秆,iOS8默認(rèn)隱藏狀態(tài)欄,此時APPFRAME_HEIGHT=SCREEN_HEIGHT

#defineAPPFRAME_HEIGHT([UIScreen mainScreen].applicationFrame.size.height)

--------------------------------------------------------------------------------

(4)bounds和frame的區(qū)別

下圖展示了bounds和frame的區(qū)別

10.機型尺寸適配Screen

Scale Adaption)

從iPhone3GS/iPhone4(s)過渡到iPhone5(s)時议双,在邏輯上寬度不變高度稍高痘番,之前舊的素材和布局通過AutoresizingFlexible簡單適配即可運行得很好,但由于高寬比增大平痰,上下兩端出現(xiàn)黑粗邊(典型如LaunchImage)汞舱。從分辨率的角度來看,除了需要提供LaunchImage這種滿屏圖宗雇,其他基本沿用二倍圖(@2x)昂芜;從屏幕尺寸角度來看,需要對縱向排版略加調(diào)整逾礁。

從iPhone5(s)發(fā)展到iPhone6(+)说铃,由于高寬比保持不變,iOS對圖標(biāo)嘹履、圖片腻扇、字體進(jìn)行等比放大自適應(yīng),清晰度會有所降低砾嫉。同時幼苛,絕對坐

標(biāo)布局會導(dǎo)致在大屏下出現(xiàn)偏左偏上的問題。從分辨率的角度來看焕刮,iPhone6沿用二倍圖(@2x)舶沿,但需為iPhone6+提供更高的三倍圖

(@3x);從屏幕尺寸角度來看配并,需要重新對UI元素尺寸和布局進(jìn)行適配括荡,以期視覺協(xié)調(diào)。

(1)按寬度適配

我們先來看一下iPhone4~6(+)的屏幕高寬比:

iPhone4(s):分辨率960*640溉旋,高寬比1.5

iPhone5(s):分辨率1136*640畸冲,高寬比1.775

iPhone6:分辨率1334*750,高寬比1.779

iPhone6+:分辨率1920*1080,高寬比1.778

可粗略認(rèn)為iPhone5(s)邑闲、6(+)的高寬比是一致的(16:9)算行,即可以等比例縮放。因此可以按寬度適配

fitScreenWidth= width*(SCREEN_WIDTH/320)

這樣苫耸,共有iPhone3/4/5州邢、6、6+三組寬度褪子,在iPhone6量淌、6+下將按比例橫向放大。

(2)按高度適配

在同樣的寬度下嫌褪,iPhone4(s)的屏高比iPhone5(s)低类少,若縱向排版緊張,可以iPhone5(s)為基準(zhǔn)渔扎,按高度適配

fitScreenHeight= height*(SCREEN_HEIGHT/568)

共有iPhone3/4、5信轿、6晃痴、6+四組高度,在iPhone3/4下將按比例縱向縮小财忽,在iPhone6倘核、6+下將按比例縱向放大。

這里需要注意iPhone/iOS雙環(huán)上網(wǎng)的熱點欄對縱向布局的影響:iPhone作為個人熱點且有連接時即彪,系統(tǒng)狀態(tài)欄下面會多一行熱點連接提示欄"Personal

Hotspot: * Connection"紧唱,縱向會下壓20pt,[UIApplication sharedApplication].statusBarFrame高度變?yōu)?0pt隶校;當(dāng)所有連接都斷開時漏益,熱點欄消失,縱向高度恢復(fù)正常為20pt深胳。詳情可參考《iPhone/iOS開啟個人熱點的縱向適配小結(jié)》绰疤。

(3)按字體適配

另外,iPhone的【設(shè)置】【通用】【輔助功能】中可以設(shè)置調(diào)節(jié)【更大字體】舞终,APP也可以按字號適配

例如適配表視圖(UITableView:UIScrollView)轻庆,無法左右滑動,因此無論字號縮放比例多大敛劝,橫向都不應(yīng)超過SCREEN_WIDTH余爆。注意限定控件元素內(nèi)容區(qū)域?qū)挾纫约伴g距,并設(shè)置適當(dāng)?shù)腖ineBreakMode夸盟。表視圖支持上下滑動蛾方,因此縱向上的表格行高和內(nèi)容區(qū)域高度可按字號縮放。

對于縱向也不支持滑動的視圖,在屏幕可見視區(qū)內(nèi)排版時转捕,最好不要隨字號縮放作岖,否則可能超出既定寬高。

11.UI相對布局

考慮到iPhone機型的多樣性五芝,不可能針對iPhone4(s)痘儡、5(s)、6枢步、6+四種屏幕尺寸出四套視覺交互稿沉删,也不要基于某一機型從上往下、從左往右給絕對標(biāo)注醉途,而應(yīng)該關(guān)注subView在superView中的相對位置(EdgeInsets/Frame/Center)以及siblingView之間的偏移(Offset)矾瑰,盡量給出適合Autolayout的相對布局比例(理想情況是只給百分比)。假如交互按照iPhone5(s)下絕對標(biāo)注隘擎,則在iPhone4(s)上可能擠出屏幕底部殴穴,而在iPhone6(+)上則可能橫向偏左或縱向偏上。

開發(fā)人員基于與屏幕邊緣的間距(Margin/EdgeInsets)货葬,定位邊緣處的控件(釘釘子)作為參照采幌,然后基于控件尺寸和間隙進(jìn)行相對計算排版。這樣震桶,若釘子移動休傍,相鄰控件將順向偏移,不會因為局部調(diào)整而出現(xiàn)凌亂蹲姐。

蘋果在WWDC2012 iOS6中就已提出了Auto Layout的概念磨取,即使用約束條件來定義視圖的位置和尺寸,以適應(yīng)不同尺寸和分辨率的屏幕柴墩。

12.DEPRECATED API適配

最后忙厌,除了對屏幕尺寸和分辨率進(jìn)行適配之外,還需對iOS SDK中相關(guān)的DEPRECATED API進(jìn)行適配江咳。典型的如:

(1)UILineBreakMode->NSLineBreakMode

(2)UITextAlignment->NSTextAlignment

(3)sizeWithFont:->boundingRectWithSize:

(4)stretchableImageWithLeftCapWidth:topCapHeight:->resizableImageWithCapInsets:

(5)...

參考:

iOS設(shè)備的屏幕尺寸慰毅、分辨率及其屏幕邊長比例

iOS判斷設(shè)備屏幕尺寸、分辨率

iOS8中的UIScreen

Detecting iPhone 6/6+ screen sizes in point values

iOS8已出扎阶,@3x圖讓我們何去何從汹胃?

在Xcode 6中用矢量化PDF(vectorized PDF)來支持各種尺寸的iPhone

iOS8適配須知

適配iOS8備忘錄

《iOS界面適配()()()》

iPhone 6/6+適配心得

iOS8/Xcode6/iPhone6(+)適配

APP適配iOS8,iPhone6(+)截圖簡要說明

按比例快速兼容適配iPhone6/6 Plus

iOS的APP如何適應(yīng)iPhone 5s/6/6+三種屏幕的尺寸东臀?

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末着饥,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子惰赋,更是在濱河造成了極大的恐慌宰掉,老刑警劉巖呵哨,帶你破解...
    沈念sama閱讀 219,589評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異轨奄,居然都是意外死亡孟害,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,615評論 3 396
  • 文/潘曉璐 我一進(jìn)店門挪拟,熙熙樓的掌柜王于貴愁眉苦臉地迎上來挨务,“玉大人,你說我怎么就攤上這事玉组』驯” “怎么了?”我有些...
    開封第一講書人閱讀 165,933評論 0 356
  • 文/不壞的土叔 我叫張陵惯雳,是天一觀的道長朝巫。 經(jīng)常有香客問我,道長石景,這世上最難降的妖魔是什么劈猿? 我笑而不...
    開封第一講書人閱讀 58,976評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮潮孽,結(jié)果婚禮上糙臼,老公的妹妹穿的比我還像新娘。我一直安慰自己恩商,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,999評論 6 393
  • 文/花漫 我一把揭開白布必逆。 她就那樣靜靜地躺著怠堪,像睡著了一般。 火紅的嫁衣襯著肌膚如雪名眉。 梳的紋絲不亂的頭發(fā)上粟矿,一...
    開封第一講書人閱讀 51,775評論 1 307
  • 那天,我揣著相機與錄音损拢,去河邊找鬼陌粹。 笑死,一個胖子當(dāng)著我的面吹牛福压,可吹牛的內(nèi)容都是我干的掏秩。 我是一名探鬼主播,決...
    沈念sama閱讀 40,474評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼荆姆,長吁一口氣:“原來是場噩夢啊……” “哼蒙幻!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起胆筒,我...
    開封第一講書人閱讀 39,359評論 0 276
  • 序言:老撾萬榮一對情侶失蹤邮破,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體抒和,經(jīng)...
    沈念sama閱讀 45,854評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡矫渔,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,007評論 3 338
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了摧莽。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片庙洼。...
    茶點故事閱讀 40,146評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖范嘱,靈堂內(nèi)的尸體忽然破棺而出送膳,到底是詐尸還是另有隱情,我是刑警寧澤丑蛤,帶...
    沈念sama閱讀 35,826評論 5 346
  • 正文 年R本政府宣布叠聋,位于F島的核電站,受9級特大地震影響受裹,放射性物質(zhì)發(fā)生泄漏碌补。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,484評論 3 331
  • 文/蒙蒙 一棉饶、第九天 我趴在偏房一處隱蔽的房頂上張望厦章。 院中可真熱鬧,春花似錦照藻、人聲如沸袜啃。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,029評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽群发。三九已至,卻和暖如春发乔,著一層夾襖步出監(jiān)牢的瞬間熟妓,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,153評論 1 272
  • 我被黑心中介騙來泰國打工栏尚, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留起愈,地道東北人。 一個月前我還...
    沈念sama閱讀 48,420評論 3 373
  • 正文 我出身青樓译仗,卻偏偏與公主長得像抬虽,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子纵菌,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,107評論 2 356

推薦閱讀更多精彩內(nèi)容