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

1.iPhone尺寸規(guī)格

iphone屏幕尺寸.png

2.屏幕尺寸

  • 1 inch = 2.54cm = 25.4mm; 上表中的寬高(width/height)為手機(jī)的物理尺寸,包括顯示屏和邊框。我們通常所說的iPhone5屏幕尺寸為4英寸、iPhone6屏幕尺寸為4.7英寸,指的是顯示屏對(duì)角線的長度(diagonal)。


    iphone屏幕尺寸2.png

3.像素密度PPI

  • PPI(Pixel Per Inch by diagonal):表示沿著對(duì)角線,每英寸所擁有的像素(Pixel)數(shù)目。PPI數(shù)值越高,代表顯示屏能夠以越高的密度顯示圖像,即通常所說的分辨率越高、顆粒感越弱。


    PixelPerInchByDiagonal.png

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

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

4.縮放因子(scale factor between logic point and device pixel)

(1)Scale起源

早期的iPhone3GS的屏幕分辨率是320480(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個(gè)Point被渲染成1個(gè)2x2的像素矩陣)
但是對(duì)于開發(fā)者來說,iOS繪制圖形的API依然沿襲point(pt,注意區(qū)分印刷行業(yè)的“磅”)為單位。在同樣的邏輯坐標(biāo)系下(320x480):
1 point = scale
pixel(在iPhone4~6中,縮放因子scale=2;在iPhone6+中,縮放因子scale=3)。
可以理解為:scale=絕對(duì)長度比(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) 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ì)開發(fā)者只讀。

iOS8新增了nativeScale屬性,初步看來nativeScale與scale沒有太大區(qū)別:

// Native scale factor of the physical screen
@property(nonatomic,readonly) CGFloat nativeScale NS_AVAILABLE_IOS(8_0);

5.@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),并且命名為icon@2x.png。
如果APP要同時(shí)兼容iPhone3GS~iPhone6,則需要提供icon.png/icon@2x.png兩種分辨率的圖片。

(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。蘋果為方便開發(fā)者用的是@3x的素材,然后再縮放到@2.46x上。
參考:[《為什么iPhone 6 Plus要將3x渲染的2208x1242分辨率縮小到1080p屏幕上?》](https://www.zhihu.com/question/25288571 “為什么iPhone 6 Plus要將3x渲染的2208x1242分辨率縮小到1080p屏幕上?”) 《iPhone 6 Plus屏幕分辨率》
需要注意的是,iOS APP圖標(biāo)的尺寸和命名都需要遵守相關(guān)規(guī)范。

(3)高倍圖文件命名

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

  • 以下基于UIImage的兩類初始化API簡(jiǎn)介高倍圖的適配:
    • <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度量的一半);如果沒找到設(shè)置默認(rèn)image.scale=1.0,對(duì)應(yīng)邏輯size大小同像素尺寸。因此,使用該方法,無需特意指定高倍圖后綴。在實(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ì)象沒有使用系統(tǒng)緩存,并且指定文件名必須包含明確的高倍圖后綴。如果文件名包含@2x后綴,則image.scale=2.0;否則默認(rèn)image.scale=1.0,同樣對(duì)于Retina屏將會(huì)失真。

  • <3>目前,適配iPhone6+時(shí),除了一些鋪滿全屏的大圖(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) CGRect bounds;
--------------------------------------------------------------------------------
 //考慮轉(zhuǎn)屏的影響,按照實(shí)際屏幕方向(UIDeviceOrientation)的寬高
    #define SCREEN_WIDTH ([UIScreen mainScreen].bounds.size.width)
    #define SCREEN_HEIGHT ([UIScreen mainScreen].bounds.size.height)
    #define STATUSBAR_HEIGHT ([UIApplication sharedApplication].statusBarFrame.size.height)
 //不考慮轉(zhuǎn)屏的影響,只取豎屏(UIDeviceOrientationPortrait)的寬高
    #define SCREEN_WIDTH MIN([UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)
    #define SCREEN_HEIGHT MAX([UIScreen mainScreen].bounds.size.height, [UIScreen mainScreen].bounds.size.width)
    #define STATUSBAR_HEIGHT MIN([UIApplication sharedApplication].statusBarFrame.size.width, [UIApplication sharedApplication].statusBarFrame.size.height)

(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的原點(diǎn)是(0,0)點(diǎn)(就是view本身的坐標(biāo)系統(tǒng),默認(rèn)永遠(yuǎn)都是0,0點(diǎn),除非認(rèn)為setbounds),而frame的原點(diǎn)卻是任意的(相對(duì)于父視圖中的坐標(biāo)位置)。

如圖所示:

bounds和frame的區(qū)別.png
  • frame: 該view在父view坐標(biāo)系統(tǒng)中的位置和大小。相對(duì)于父視圖而言(參照點(diǎn)是,父類的坐標(biāo)系統(tǒng))
  • bounds:該view在自身的坐標(biāo)系統(tǒng)中的位置和大小。相對(duì)于自身視圖而言(參照點(diǎn)是,自身的坐標(biāo)系統(tǒng),就相當(dāng)于View B自己的坐標(biāo)系統(tǒng),以0,0點(diǎn)為起點(diǎn))
  • center:該view的中心點(diǎn)在父view坐標(biāo)系統(tǒng)中的位置和大小。(參照點(diǎn)是,父類的坐標(biāo)系統(tǒng))
*【以上內(nèi)容有網(wǎng)絡(luò)上搜集的僅僅出于個(gè)人研究、學(xué)習(xí),不用做其他任何目的。】
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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