iPhone 4 5 6屏幕尺寸大小和APP設(shè)計(jì)詳細(xì)解讀 – 25學(xué)堂
25學(xué)堂再來跟大家重新解讀下蘋果手機(jī)4、5、6屏幕各尺寸大小,也許你們都知道啦,但是還有很多APP設(shè)計(jì)師新手不停的在群問,所以,25學(xué)堂的小編特為大家奉上這篇關(guān)于iPhone 4 5 6屏幕尺寸大小詳細(xì)解讀。
1、蘋果手機(jī)(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 |
320×480 |
@1x |
320×480 |
163 |
4(s) |
2.31 inches (58.6 mm) |
4.5 inches (115.2 mm) |
3.5-inch |
320×480 |
@2x |
640×960 |
326 |
5c |
2.33 inches (59.2 mm) |
4.90 inches (124.4 mm) |
4-inch |
320×568 |
@2x |
640×1136 |
326 |
5(s) |
2.31 inches (58.6 mm) |
4.87 inches (123.8 mm) |
4-inch |
320×568 |
@2x |
640×1136 |
326 |
6 |
2.64 inches (67.0 mm) |
5.44 inches (138.1 mm) |
4.7-inch |
375×667 |
@2x |
750×1334 |
326 |
6+ |
3.06 inches (77.8 mm) |
6.22 inches (158.1 mm) |
5.5-inch |
414×736 |
@3x |
(1242×2208->) 1080×1920 |
401 ? |
單位inch(英吋)的注釋: ? ?1 inch = 2.54cm = 25.4mm
相關(guān)邏輯分辨率和 物理分辨率的詳細(xì)解讀:
手機(jī)屏幕分辨率術(shù)語:邏輯分辨率和物理分辨率
?
簡單明要的說iPhone 4 5 6屏幕尺寸大小:
蘋果iphone4 /iphone 4s ?——————– ?3.5英寸 ——— ?640*960px—–高寬比1.5
蘋果iphone5 / ?iphone 5c ?/iphone 5s ?——4英寸————640*1136px—–高寬比1.775
蘋果iphone6 ?———————————-4.7英寸————750*1334px—–高寬比1.779 ?
蘋果iphone6 plus ——————- ———5.5英寸————1242*2208px—–高寬比1.778
?
我們通常所說的 iPhone4屏幕尺寸為3.5英寸、 iPhone5屏幕尺寸為4英寸、iPhone6屏幕尺寸為4.7英寸,指的是顯示屏對角線的長度(diagonal)。
?
2、蘋果手機(jī)iphone 的屏幕密度PPI
PI(Pixel Per Inch by diagonal):表示沿著對角線,每英寸所擁有的像素(Pixel)數(shù)目。
PPI數(shù)值越高,代表顯示屏能夠以越高的密度顯示圖像,即通常所說的分辨率越高、顆粒感越弱。
根據(jù)勾股定理,可以得知iPhone4(s)的PPI計(jì)算公式為:
3、蘋果手機(jī)iPhone 4 5 6的屏幕的縮放因子( 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倍,像素分辨率提高到(320×2)x(480×2)= 960×640(PPI=326),?顯像分辨率提升至iPhone3GS的4倍(1個(gè)Point被渲染成1個(gè)2×2的像素矩陣)。
但是對于開發(fā)者來說,iOS繪制圖形的API依然沿襲point(pt,注意區(qū)分印刷行業(yè)的“磅”)為單位。在同樣的邏輯坐標(biāo)系下(320×480):
? ? 1 point = scale*pixel (在iPhone4~6中,縮放因子scale=2;在iPhone6+中,縮放因子scale=3)。
? ? 可以理解為:
? ? scale= 絕對長度比 ( point/pixel)= 單位長度內(nèi)的數(shù)量比 ( pixel/point)
?為了自動(dòng)適應(yīng)分辨率,系統(tǒng)會根據(jù)設(shè)備實(shí)際分辨率,自動(dòng)給UIScreen.scale賦值,該屬性對開發(fā)者只讀。APP設(shè)計(jì)師可以忽略。
4、
@2x/@3x ??以及高倍圖適配
ne 6 Plus發(fā)布后,iphone APP設(shè)計(jì)不得了考慮適配所有iPhone機(jī)型啦。
(1)、@2x
iPhone3GS時(shí)代,我們?yōu)橐粋€(gè)應(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要同時(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(1242×2208-> 1080×1920 ),準(zhǔn)確的講,應(yīng)該是@2.46x。蘋果為方便開發(fā)者用的是@3x的素材,然后再縮放到@2.46x上。
1、 iPhone 6/6Plus UI界面設(shè)計(jì)和適配尺寸規(guī)范
2、 iPhone 6/6Plus APPui界面設(shè)計(jì)規(guī)范以及界面適配
3、 最新WebAPP設(shè)計(jì)指南規(guī)范:適配iphone6技巧
? ? 如果APP要同時(shí)兼容iPhone3GS~iPhone6+,則需要提供icon.png/icon@2x.png/icon@3x.png三種分辨率的圖片。
? ? 需要注意的是,iOS APP圖標(biāo)的尺寸 和 切圖命名規(guī)范 都需要遵守相關(guān)規(guī)范
(3)高倍圖文件命名
? ? 對于iPhone3、4/5/6、6+三類機(jī)型,需要按分辨率提供相應(yīng)的高倍圖并且文件名添加相應(yīng)后綴,否則會拉伸(stretchable/resizable)失真(模糊或邊角出現(xiàn)鋸齒)。
?比如:bg-xxx@2x.png、btn-xxx@2x.png?、icon-xxx@2x.png
如bg-xxx@3x.png、btn-xxx@3x.png?、icon-xxx@3x.png
切圖寬和高 必須的偶數(shù)。
?
?