iOS開(kāi)發(fā):iPhone尺寸和適配

1:iPhone尺寸規(guī)格

尺寸表格:1 inch(英寸) = 2.54cm = 25.4mm

2:屏幕尺寸

我們通常所說(shuō)的iPhone5屏幕尺寸為4英寸揽思、iPhone6屏幕尺寸為4.7英寸,指的是顯示屏對(duì)角線(xiàn)的長(zhǎng)度(diagonal)


屏幕尺寸:對(duì)角線(xiàn)

3:像素密度PPI

PPI(Pixel Per Inch by diagonal):表示沿著對(duì)角線(xiàn),每英寸所擁有的像素(Pixel)數(shù)目场躯。

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


物理尺寸(對(duì)角線(xiàn)長(zhǎng)度)


像素尺寸(像素總量)

根據(jù)勾股定理

iPhone4(s)的PPI計(jì)算公式為:

計(jì)算結(jié)果稍有出入,這是因?yàn)橄袼氐碾x散采樣有鋸齒效應(yīng)。


4:縮放因子(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)

后來(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)凳忙。

結(jié)論:

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


(2)UIScreen.scale

UIScreen.h

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

為了自動(dòng)適應(yīng)分辨率,系統(tǒng)會(huì)根據(jù)設(shè)備實(shí)際分辨率,自動(dòng)給UIScreen.scale賦值,該屬性對(duì)開(kāi)發(fā)者只讀袒哥。

(3)UIScreen.nativeScale(iOS8新增了nativeScale屬性:nativeScale與scale沒(méi)有太大區(qū)別)

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

(4)機(jī)型判別

在同樣的邏輯分辨率下,可以通過(guò)scale參數(shù)識(shí)別是iPhone3GS還是iPhone4(s)。以下基于nativeScale參數(shù),定義了探測(cè)機(jī)型是否為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ū)分機(jī)型iPhone4與4s消略、iPhone5與5s呢?通過(guò)[[UIDevice currentDevice] model]只能判別iPhone堡称、iPad、iPod大類(lèi),要判斷iPhone具體機(jī)型型號(hào),則需要通過(guò)sysctlbyname("hw.machine")獲取詳細(xì)的設(shè)備參數(shù)信息予以甄別艺演。


5:@2x @3x及高倍圖適配

(1)@2x

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),并且命名為icon@2x.png胎撤。?

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

(2)@3x

Phone6+在實(shí)際渲染時(shí),downsampling/1.15(1242x2208->1080x1920),準(zhǔn)確的講,應(yīng)該是@2.46x。蘋(píng)果為方便開(kāi)發(fā)者用的是@3x的素材,然后再縮放到@2.46x上伤提。

如果APP要同時(shí)兼容iPhone3GS~iPhone6+,則需要提供icon.png/icon@2x.png/icon@3x.png三種分辨率的圖片巫俺。需要注意的是,iOS APP圖標(biāo)的尺寸和命名都需要遵守相關(guān)規(guī)范。

參考:一張圖幫你看懂 iPhone 6 Plus 屏幕分辨率

(3)加載圖片的方式

<1>

+imageNamed:

該方法使用系統(tǒng)緩存,適合表視圖重復(fù)加載圖像的情形肿男。同時(shí)該API根據(jù)UIScreen的scale,自動(dòng)查找包含對(duì)應(yīng)高倍圖后綴名(@2x)的文件,如果找到二倍圖,則image.scale=2.0,對(duì)應(yīng)邏輯size大小以point度量(pixel度量的一半);如果沒(méi)找到設(shè)置默認(rèn)image.scale=1.0,對(duì)應(yīng)邏輯size大小同像素尺寸介汹。因此,

使用該方法,無(wú)需特意指定高倍圖后綴。在實(shí)際運(yùn)行時(shí),系統(tǒng)如果發(fā)現(xiàn)當(dāng)前設(shè)備是Retina屏(scale=2),會(huì)自動(dòng)尋找"*@2x.png"命名格式的圖片,加載針對(duì)Retina屏的圖片素材,否則會(huì)失真舶沛。

<2>

+imageWithContentsOfFile

+imageWithData:(scale:)

-initWithContentsOfFile:

-initWithData:(scale:)

這組方法創(chuàng)建的UIImage對(duì)象沒(méi)有使用系統(tǒng)緩存,并且指定文件名必須包含明確的高倍圖后綴嘹承。

如果文件名包含@2x后綴,則image.scale=2.0;否則默認(rèn)image.scale=1.0,同樣對(duì)于Retina屏將會(huì)失真。

<3>

目前,適配iPhone6+時(shí),除了一些鋪滿(mǎn)全屏的大圖(LogoIcon如庭、LaunchImage)需提供三倍圖,其他的小圖仍可沿用原有的二倍圖自適應(yīng)拉伸叹卷。


6:Screen Bounds ?& ?Application Frame

(1) UIScreen.bounds

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

@property(nonatomic,readonly)CGRectbounds;

//考慮?轉(zhuǎn)屏?的影響,按照實(shí)際屏幕方向(UIDevice ?Orientation)的寬高

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

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

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

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

#defineSCREEN_WIDTH? MIN([UIScreen mainScreen].bounds.size.width, [UIScreenmainScreen].bounds.size.height)

#defineSCREEN_HEIGHT? MAX([UIScreen mainScreen].bounds.size.height? ? ? [UIScreenmainScreen].bounds.size.width)

#defineSTATUSBAR_HEIGHT MIN([UIApplicationsharedApplication].statusBarFrame.size.width,

[UIApplicationsharedApplication].statusBarFrame.size.height)


7:機(jī)型尺寸適配(Screen Scale Adaption)


待續(xù)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子骤竹,更是在濱河造成了極大的恐慌帝牡,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,817評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蒙揣,死亡現(xiàn)場(chǎng)離奇詭異靶溜,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)鸣奔,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)惩阶,“玉大人挎狸,你說(shuō)我怎么就攤上這事《峡” “怎么了锨匆?”我有些...
    開(kāi)封第一講書(shū)人閱讀 157,354評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)冬筒。 經(jīng)常有香客問(wèn)我恐锣,道長(zhǎng),這世上最難降的妖魔是什么舞痰? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,498評(píng)論 1 284
  • 正文 為了忘掉前任土榴,我火速辦了婚禮,結(jié)果婚禮上响牛,老公的妹妹穿的比我還像新娘玷禽。我一直安慰自己,他們只是感情好呀打,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,600評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布矢赁。 她就那樣靜靜地躺著,像睡著了一般贬丛。 火紅的嫁衣襯著肌膚如雪撩银。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 49,829評(píng)論 1 290
  • 那天豺憔,我揣著相機(jī)與錄音额获,去河邊找鬼。 笑死恭应,一個(gè)胖子當(dāng)著我的面吹牛咪啡,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播暮屡,決...
    沈念sama閱讀 38,979評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼撤摸,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起准夷,我...
    開(kāi)封第一講書(shū)人閱讀 37,722評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤钥飞,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后衫嵌,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體读宙,經(jīng)...
    沈念sama閱讀 44,189評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,519評(píng)論 2 327
  • 正文 我和宋清朗相戀三年楔绞,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了结闸。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,654評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡酒朵,死狀恐怖桦锄,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情蔫耽,我是刑警寧澤结耀,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布,位于F島的核電站匙铡,受9級(jí)特大地震影響图甜,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜鳖眼,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,940評(píng)論 3 313
  • 文/蒙蒙 一黑毅、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧钦讳,春花似錦博肋、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,762評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至掘猿,卻和暖如春病游,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背稠通。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,993評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工衬衬, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人改橘。 一個(gè)月前我還...
    沈念sama閱讀 46,382評(píng)論 2 360
  • 正文 我出身青樓滋尉,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親飞主。 傳聞我的和親對(duì)象是個(gè)殘疾皇子狮惜,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,543評(píng)論 2 349

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