1. 程式人生 > >iOS 螢幕尺寸、解析度、適配

iOS 螢幕尺寸、解析度、適配

1.iPhone尺寸規格

裝置

iPhone

Width

Height

對角線

Diagonal

邏輯解析度(point)

Scale Factor

裝置解析度(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->)

1080x1920

401 

2.單位inch(英吋

    1 inch = 2.54cm = 25.4mm

3.iPhone手機寬高

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

    以下為iPhone4s的寬高示意圖:


4.螢幕尺寸

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

    以下為iPhone5~6+的螢幕尺寸規格示意圖:


5.畫素密度PPI

    PPI(Pixel Per Inch by diagonal):表示沿著對角線,每英寸所擁有的畫素(Pixel)數目。

    PPI數值越高,代表顯示屏能夠以越高的密度顯示影象,即通常所說的解析度越高、顆粒感越弱。


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


    計算結果稍有出入,這是因為畫素的離散取樣有鋸齒效應。

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)

    後來在iPhone4中,同樣大小(3.5 inch)的螢幕採用了Retina顯示技術,橫、縱向方向畫素密度都被放大到2倍,畫素解析度提高到(320x2)x(480x2)= 960x640(PPI=326), 顯像解析度提升至iPhone3GS的4倍(1個Point被渲染成1個2x2的畫素矩陣)。

    但是對於開發者來說,iOS繪製圖形的API依然沿襲point(pt,注意區分印刷行業的“磅”)為單位。在同樣的邏輯座標系下(320x480):

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

    可以理解為:

    scale=絕對長度比point/pixel)=單位長度內的數量比pixel/point)

    (2)UIScreen.scale

    UIScreen.h中定義了該屬性:

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

    @property(nonatomic,readonlyCGFloat 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.

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

    為了自動適應解析度,系統會根據裝置實際解析度,自動給UIScreen.scale賦值,該屬性對開發者只讀。

    (3)UIScreen.nativeScale

    iOS8新增了nativeScale屬性:

    // Native scale factor of the physical screen

    @property(nonatomic,readonlyCGFloat nativeScale NS_AVAILABLE_IOS(8_0);

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

        (lldb)p (CGFloat)[[UIScreen mainScreen] scale]
        (CGFloat) $1 = 3
        (lldb) p(CGFloat)[[UIScreen mainScreen] nativeScale]
        (CGFloat) $2 = 3

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

   (4)機型判別

    在同樣的邏輯解析度下,可以通過scale引數識別是iPhone3GS還是iPhone4(s)。以下基於nativeScale引數,定義了探測機型是否為iPhone6+的巨集:

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

    // not UIUserInterfaceIdiomPad
    #define IS_IPHONE (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
    // detect iPhone6 Plus based on its native scale
    #define IS_IPHONE_6PLUS (IS_IPHONE && [[UIScreenmainScreen] nativeScale] == 3.0f)

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

    那麼,同樣的解析度和scale,如何區分機型iPhone4與4s、iPhone5與5s呢?通過[[UIDevice currentDevice] model]只能判別iPhone、iPad、iPod大類,要判斷iPhone具體機型型號,則需要通過sysctlbyname("hw.machine")獲取詳細的裝置引數資訊予以甄別。



8.@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時代,我們為一個應用提供圖示(或按鈕提供貼圖),只需要icon.png。針對現在的iPhone4~6 Retina顯示屏,需要製作額外的@2x高解析度版本。

    例如在iPhone3GS中,scale=1,用的圖示是50x50pixel(logicalimage.size=50x50point);在iPhone4~6中,scale=2,則需要100×100pixel(logical image.size=50x50point,乘以image.scale=dimensions in pixels),並且命名為[email protected]

    如果APP要同時相容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+在實際渲染時,downsampling/1.15(1242x2208->1080x1920),準確的講,應該是@2.46x。蘋果為方便開發者用的是@3x的素材,然後再縮放到@2.46x上。

    如果APP要同時相容iPhone3GS~iPhone6+,則需要提供icon.png/[email protected]/[email protected]三種解析度的圖片。

    需要注意的是,iOS APP圖示的尺寸命名都需要遵守相關規範。

    (3)高倍圖檔案命名

    對於iPhone3、4/5/6、6+三類機型,需要按解析度提供相應的高倍圖並且檔名新增相應字尾,否則會拉伸(stretchable/resizable)失真(模糊或邊角出現鋸齒)。
    以下基於UIImage的兩類初始化API簡介高倍圖的適配:
    <1>+imageNamed:該方法使用系統快取,適合表檢視重複載入影象的情形。同時該API根據UIScreen的scale,自動查詢包含對應高倍圖字尾名(@2x)的檔案,如果沒找到設定預設image.scale=1.0。因此,使用該方法,無需特意指定高倍圖字尾。在實際執行時,系統如果發現當前裝置是Retina屏(scale=2),會自動尋找"*@2x.png"命名格式的圖片,載入針對Retina屏的圖片素材,否則會失真。
    <2>+imageWithContentsOfFile/+imageWithData:(scale:)/-initWithContentsOfFile:/-initWithData:(scale:)
    這組方法建立的UIImage物件沒有使用系統快取,並且指定檔名必須包含明確的高倍圖字尾。如果檔名包含@2x字尾,則image.scale=2.0;否則預設image.scale=1.0,同樣對於Retina屏將會失真。
    <3>目前,適配iPhone6+時,除了一些鋪滿全屏的大圖(LogoIcon、LaunchImage)需提供三倍圖,其他的小圖仍可沿用原有的二倍圖自適應拉伸。

9.Screen Bounds Application Frame

   (1)UIScreen.bounds

    // Bounds of entire screen in points(本地座標系,起點為[0,0]

    @property(nonatomic,readonlyCGRect bounds

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

    //考慮轉屏的影響,按照實際螢幕方向UIDeviceOrientation)的寬高

    #define SCREEN_WIDTH([UIScreenmainScreen].bounds.size.width)

    #define SCREEN_HEIGHT([UIScreenmainScreen].bounds.size.height)

    #define STATUSBAR_HEIGHT([UIApplicationsharedApplication].statusBarFrame.size.height)

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

    #define SCREEN_WIDTH MIN([UIScreenmainScreen].bounds.size.width, [UIScreenmainScreen].bounds.size.height)

    #define SCREEN_HEIGHTMAX([UIScreenmainScreen].bounds.size.height, [UIScreenmainScreen].bounds.size.width)

    #define STATUSBAR_HEIGHT MIN([UIApplicationsharedApplication].statusBarFrame.size.width, [UIApplicationsharedApplication].statusBarFrame.size.height)

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

     (2)UIScreen.nativeBounds

    iOS8新增了nativeBounds屬性,輸出豎屏畫素級解析度:

    // The bounding rectangle of the physical screen,measured in pixels. (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,readonlyCGRect nativeBounds NS_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 screen minus status bar if visible)

    // bounds除去系統狀態列

    @property(nonatomic,readonlyCGRect applicationFrame

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

    // APPFRAME_WIDTH=SCREEN_WIDTH

    #define APPFRAME_WIDTH([UIScreen mainScreen].applicationFrame.size.width)

    // APPFRAME_HEIGHT=SCREEN_HEIGHT-STATUSBAR_HEIGHT

    //注意:橫屏UIDeviceOrientationLandscape)時,iOS8預設隱藏狀態列,此時APPFRAME_HEIGHT=SCREEN_HEIGHT

    #define APPFRAME_HEIGHT ([UIScreen mainScreen].applicationFrame.size.height)

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

    (4)bounds和frame的區別


10.機型尺寸適配Screen Scale Adaption

    從iPhone3GS/iPhone4(s)過渡到iPhone5(s)時,在邏輯上寬度不變高度稍高,之前舊的素材和佈局通過AutoresizingFlexible簡單適配即可執行得很好,但由於高寬比增大,上下兩端出現黑粗邊(典型如LaunchImage)。從解析度的角度來看,除了需要提供LaunchImage這種滿屏圖,其他基本沿用二倍圖(@2x);從螢幕尺寸角度來看,需要對縱向排版略加調整。

    從iPhone5(s)發展到iPhone6(+),由於高寬比保持不變,iOS對圖示、圖片、字型進行等比放大自適應,清晰度會有所降低。同時,絕對座標佈局會導致在大屏下出現偏左偏上的問題。從解析度的角度來看,iPhone6沿用二倍圖(@2x),但需為iPhone6+提供更高的三倍圖(@3x);從螢幕尺寸角度來看,需要重新對UI元素尺寸和佈局進行適配,以期視覺協調。

    (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
    可粗略認為iPhone5(s)、6(+)的高寬比是一致的(16:9),即可以等比例縮放。因此可以按寬度適配
        fitScreenWidth= width*(SCREEN_WIDTH/320)
    這樣,共有iPhone3/4/5、6、6+三組寬度,在iPhone6、6+下將按比例橫向放大。

    (2)按高度適配

    在同樣的寬度下,iPhone4(s)的屏高比iPhone5(s)低,若縱向排版緊張,可以iPhone5(s)為基準,按高度適配
        fitScreenHeight= height*(SCREEN_HEIGHT/568)
    共有iPhone3/4、5、6、6+四組高度,在iPhone3/4下將按比例縱向縮小,在iPhone6、6+下將按比例縱向放大。

    這裡需要注意iPhone/iOS雙環上網熱點欄對縱向佈局的影響:iPhone作為個人熱點且有連線時,系統狀態列下面會多一行熱點連線提示欄"Personal Hotspot: * Connection",縱向會下壓20pt,[UIApplication sharedApplication].statusBarFrame高度變為40pt;當所有連線都斷開時,熱點欄消失,縱向高度恢復正常20pt

    (3)按字型適配

    另外,iPhone的【設定】【通用】【輔助功能】中可以設定調節【更大字型】,APP也可以按字號適配
    例如適配表檢視(UITableView:UIScrollView),無法左右滑動,因此無論字號縮放比例多大,橫向都不應超過SCREEN_WIDTH。注意限定控制元件元素內容區域寬度以及間距,並設定適當的LineBreakMode。表檢視支援上下滑動,因此縱向上的表格行高和內容區域高度可按字號縮放。

    對於縱向也不支援滑動的檢視,在螢幕可見視區內排版時,最好不要隨字號縮放,否則可能超出既定寬高。

11.UI相對佈局

    考慮到iPhone機型的多樣性,不可能針對iPhone4(s)、5(s)、6、6+四種螢幕尺寸出四套視覺互動稿,也不要基於某一機型從上往下、從左往右給絕對標註,而應該關注subView在superView中的相對位置(EdgeInsets/Frame/Center)以及siblingView之間的偏移(Offset),儘量給出適合Autolayout的相對佈局比例(理想情況是隻給百分比)。假如互動按照iPhone5(s)下絕對標註,則在iPhone4(s)上可能擠出螢幕底部,而在iPhone6(+)上則可能橫向偏左或縱向偏上。

    開發人員基於與螢幕邊緣的間距(Margin/EdgeInsets),定位邊緣處的控制元件(釘釘子)作為參照,然後基於控制元件尺寸和間隙進行相對計算排版。這樣,若釘子移動,相鄰控制元件將順向偏移,不會因為區域性調整而出現凌亂

    蘋果在WWDC2012 iOS6中就已提出了Auto Layout的概念,即使用約束條件來定義檢視的位置和尺寸,以適應不同尺寸和解析度的螢幕。

12.DEPRECATED API適配

    最後,除了對螢幕尺寸和解析度進行適配之外,還需對iOS SDK中相關的DEPRECATED API進行適配。典型的如:

    (1)UILineBreakMode->NSLineBreakMode
    (2)UITextAlignment->NSTextAlignment
    (3)sizeWithFont:->boundingRectWithSize:
    (4)stretchableImageWithLeftCapWidth:topCapHeight:->resizableImageWithCapInsets:

    (5)...

參考:

相關推薦

IOS學習】iPhone螢幕尺寸解析度

1.iPhone尺寸規格 裝置 iPhone 寬 Width 高 Height 對角線 Diagonal 邏輯解析度(point) Scale Factor 裝置解析度(pixel) PPI 3GS 2.4

iPhone螢幕尺寸解析度-曾夢想仗劍走天涯

1.iPhone尺寸規格 裝置 iPhone 寬 Width 高 Height 對角線 Diagonal 邏輯解析度(point) Scale Factor 裝置解析度(pixel) PPI 3GS 2.4

iPhone螢幕尺寸解析度

1.iPhone尺寸規格 裝置 iPhone 寬 Width 高 Height 對角線 Diagonal 邏輯解析度(point) Scale Factor 裝置解析度(pi

react-native 螢幕尺寸和文字大小

現在的手機品牌和型號越來越多,導致我們平時寫佈局的時候會在個不同的移動裝置上顯示的效果不同, 比如我們的設計稿一個View的大小是300px,如果直接寫300px,可能在當前裝置顯示正常,但到了其他裝置可能就會偏小或者偏大,這就需要我們對螢幕進行適配。 安卓原生的話有

iOS 螢幕尺寸解析度

1.iPhone尺寸規格 裝置 iPhone 寬 Width 高 Height 對角線 Diagonal 邏輯解析度(point) Scale Factor 裝置解析度(pixel) PPI 3GS 2.4 inches (62.1 mm) 4.5 inches (

iOS 螢幕尺寸邏輯解析度物理解析度之間的相互關係

型號 螢幕尺寸(inch) 邏輯解析度(point) 縮放因子(scale factor) 物理解析度(pixel) 畫素密度(PPI) iPhone3GS 3.5 320 * 480 @1x 320 * 48

IOS 判斷裝置螢幕尺寸解析度 根據螢幕尺寸解析度

根據螢幕尺寸和解析度,ios現在數起來有6個版本。 iOS 裝置現有的解析度如下: iPhone/iPod Touch 普通屏                           320畫素 x 480畫素       iPhone 1、3G、3GS,iPod Touc

屏幕尺寸屏幕

屏幕尺寸 code ati objective eight cat 寬度 object screen 1、屏幕尺寸 /** 獲取當前屏幕的高度 */ #define CHScreenH ([UIScreen mainScreen].applicationFrame.size

移動端web頁面知識小結之畫素密度解析度螢幕尺寸

一直以來,本人對移動端解析度、畫素等概念傻傻分不清,特查閱多位牛人部落格後總結如下要點,以便日後檢視。 文件來源 螢幕解析度 是指螢幕上垂直方向和水平方向上的畫素個數,單位是px。常見取值 480X800,320X480等 IPhone手

【全解析】螢幕尺寸解析度,畫素,PPI之間到底什麼關係?for 螢幕

這篇文章講的是真好,連我這樣的傻子都能看懂,解決了我的好多疑惑,下面是正文 今天我給大家來講講這幾個咱們經常打交道的詞到底啥意思,以及他們之間到底有什麼關係。這篇文章是我花了一個下午從N多篇文章裡提煉出的一個白話版,保證讓你看得懂。 咱們從手機開始說起吧。先上一張

移動端高清多屏方案

dem ios7 scale gif java lec pixel pix 內網地址 背景 開發移動端H5頁面面對不同分辨率的手機面對不同屏幕尺寸的手機 視覺稿 在前端開發之前,視覺MM會給我們一個psd文件,稱之為視覺稿。 對於移動端開發而言,為了做到頁面高清的效果,視覺

Android 呼叫相機相簿(6.0)

又好久沒有寫部落格了,好習慣不能斷,該寫點就得寫點,今天帶來的筆記是關於Android 專案呼叫系統相機 與呼叫系統相簿的之後拿到照片的基本操作,我感覺好多人還是不太熟悉的哈。專案相容 Android 5.0裝置、Android 6.0裝置、Android 7.0、Android 8.0

Android-CardView5.0畫素

用過CardView的可能遇到過適配問題。 在Android 5.0,API 21以上的版本才正常,在21以下邊距會自動增加陰影的寬度。 如果不做適配,那麼間距就會擴大,比如設定陰影高度為4dp,marginTop為3,最後效果就是控制元件的高度-4,marginTop為4+3=7

iPhone X(10)螢幕解析度

背部材料延伸到顯示的邊緣, 並且 UI 元素被適當地插入和定位。 對於具有自定義佈局的應用程式, 支援 iPhone X 也應該相對容易, 特別是當您的應用程式使用自動佈局並遵守安全區域(safe area)和邊界佈局參考線(margin layout guides)。 預覽你的應用程式在

iOS789相簿

前言 由於在iOS8及以後蘋果將原有的操作相簿的ALAssetsLibrary framework替換為Photos framework,所以,如果在應用中使用到的相簿需要支援iOS8以下的系統版本的話,就需要了解Photos framework以做不同的版本

ViewPager高度自適應?height=wrap_content 無效固定高度性差

        寫的幾個專案基本都有ViewPager實現Banner,最開始都是固定高度,讓服務端返回圖片比例控制一下(好低階)。。。 通過LayoutParmas動態改變ViewPager的高度 int viewPagerIndex = main.indexOf

可變分割槽儲存管理(最先下次最佳最差法)

可變分割槽儲存管理,又稱動態分割槽模式,是實存管理中連續儲存的一種實現方式。 在分割槽的分配和回收時,根據不同的查詢規則,有5種: first fit,最先適應分配演算法,按地址遞增排序。 next fit,下次適應分配演算法,在first fit基礎上,

[iOS]UITableViewController 無法實現鍵盤自動

蘋果官方文件: The UITableViewController class implements the foregoing behavior by overriding loadView, viewWillAppear:, and other met

要把劉海屏進行到底:iOS新規要求所有App劉海屏

就在昨晚,蘋果正式推出了iOS 11.4 Beta 2的公測版本,相信在不久後蘋果就會正式推送iOS 11.4,而iOS 11.4也很可能是iOS 11的最後一個版本。在即將到來的6月,蘋果將會推出全新的iOS 12作業系統。 近日,蘋果釋出公

android 電視端應用不同解析度

電視端android應用開發比手機有點好處是電視的解析度就那麼幾種,一般只需要做720P和1080P的就足夠了.720P是指1280x720, 1080P是指1920x1080. 適配主要就是兩塊: 1. 圖片 2.字型和長寬定義 先說圖片: 因為720P下的圖片