脫手試試！手把手教你如何適配 iPhone X

編者按：基于許多文章都只是翻譯了官方的原文，并沒(méi)有加入本身的想法和見(jiàn)解，所以我決定本身試著適配 iPhone X，假如出現(xiàn)了失誤或者題目，請(qǐng)多指教。畢竟寫(xiě)文章的初衷是為了跟大家一路提高和探究呢~

認(rèn)識(shí) iPhone X

這里用 iPhone 6 舉例子是由于大部分設(shè)計(jì)師都用 iPhone 6 來(lái)做設(shè)計(jì)稿，方便大家理解，其實(shí) iPhone 8也是這個(gè)分辨率。

iPhone 6 ：750×1334px（375×667px @2x）

iPhone X ：1125×2436px (375×812px @3x)

在邏輯像素上 iPhone X 的寬度和 iPhone 6 保持同等，只是高度高了145px（812-667），假如是用@1x做設(shè)計(jì)稿，那么在適配 iPhone X 的時(shí)候會(huì)方便許多，由于只必要增長(zhǎng)高度就能得到 iPhone X 的大小，所有的 Symbol 基本不變，只是復(fù)制幾個(gè)蘋(píng)果爸爸的Symbol 到你的Symbol 里面，用來(lái)做 iPhone X 的設(shè)計(jì)稿。但是假如用@2x 來(lái)做設(shè)計(jì)稿會(huì)稍微麻煩些，畢竟Sketch UI Kit 都是基于@1x 來(lái)做設(shè)計(jì)稿的，所以只能把 symbol 重新解散，然后做成@2x大小的尺寸。

雖然它們的邏輯像素寬度同等，但是他們的像素分辨率是不一樣的，iPhone 6 采用@2x切圖，iPhone X 采用@3x 切圖。有人會(huì)用@2x 做設(shè)計(jì)稿，那怎么適配 iPhone X 設(shè)計(jì)稿，難道要縮放？ iPhone 6 （750×1334px）尺寸到 iPhone X（1125×2436px），雖然兩者的寬度關(guān)系是1.5倍，但是通過(guò)縮放做 iPhone X 也是相稱(chēng)麻煩，由于你的 Sketch 設(shè)計(jì)稿里面可能存在 Symbol，所以如許的做法是行不通的。但假如你的團(tuán)隊(duì)都是用@2x 來(lái)做設(shè)計(jì)稿的話(huà)，也沒(méi)什么題目，接下來(lái)就提供一個(gè)更簡(jiǎn)單的方法解決 iPhone X 的適配題目。

iPhone X 適配

我列出了 iPhone X 的三種分辨率的尺寸：375×812px（@1x），750×1624px（@2x），1125×2436px（@3x）

假如你的團(tuán)隊(duì)使用的是750×1334px（@2x）的設(shè)計(jì)稿，你在適配 iPhone X 的時(shí)候可以采用 iPhone X @2x的圖來(lái)適配，如許就省去了縮放這一步驟，而且開(kāi)發(fā)使用的是邏輯像素即375pt×812px來(lái)做 iPhone X 的設(shè)計(jì)還原的，所以如許設(shè)計(jì) iPhone X 是不會(huì)影響開(kāi)發(fā)的，由于750×1624px（@2x）還原到@1x 照舊375×812px，信賴(lài)你已經(jīng)曉暢了。

1.iPhone X安全區(qū)域題目

假如你用@1x 來(lái)做設(shè)計(jì)稿：iPhone X 安全區(qū)域是375×734px。

假如你用@2x 來(lái)做設(shè)計(jì)稿：iPhone X 安全區(qū)域是750×1468px。

2.如何計(jì)算 iPhone X 安全區(qū)域

@1x 的 iPhone X 安全區(qū)域：

安全區(qū)域=812px—Status Bar (44px) +Home Indicator（34px）

@2x 的 iPhone X 安全區(qū)域：

安全區(qū)域=1624px—Status Bar (88px) +Home Indicator（68px）

iPhone X 現(xiàn)實(shí)案例適配

在開(kāi)始之前，我們先看一下其他App怎么適配之前的 iOS 設(shè)備的，我們可以知道頭部區(qū)域采用了等比例的方法來(lái)適配，由于只有如許才能保證640×1136px上面能夠放得下響應(yīng)的內(nèi)容。其他的只必要放置響應(yīng)的切圖即可。

一開(kāi)始以為頭部適配很簡(jiǎn)單，我們也采用了等比例適配，后來(lái)發(fā)現(xiàn)沒(méi)有需要，由于 640×1136px基本可以表現(xiàn)完全。然后我們就開(kāi)始適配 iPhone X 了，后來(lái)開(kāi)發(fā)通過(guò) Xcode 模仿出 iPhone X 的適配效果，我發(fā)現(xiàn)題目出現(xiàn)了。和我們的用藥助手 iOS 開(kāi)發(fā)討論了以后，發(fā)現(xiàn)原來(lái)導(dǎo)航欄的高度不是簡(jiǎn)單的200px 解決的，這里我們采用的是固定高度的做法而不是采用等比例的做法。一樣平常這塊區(qū)域可以有2種做法：等比例和固定高度，觀察你的網(wǎng)頁(yè)構(gòu)成，假如網(wǎng)頁(yè)內(nèi)容較少可以采用固定高度的做法。不然的話(huà)可能在小屏幕手機(jī)有些內(nèi)容放不下。

在沒(méi)有 iPhone X 之前，固定高度做法：團(tuán)體藍(lán)色區(qū)域高度給200px 解決題目，不用考慮導(dǎo)航欄題目。

但是 iPhone X 出來(lái)了，如許的做法就會(huì)行不通，由于 iPhone X 的導(dǎo)航欄高度是44px+44px=88px，比 iPhone 6的導(dǎo)航欄（64px）高了24px，所以精確適配 iPhone X 的做法應(yīng)該是導(dǎo)航欄區(qū)域高度（88px）+（200px-64px）=224px，其實(shí)就是 Status Bar 高度多了24px，所以224px 比200px 大了24px。

最后總結(jié)

• 這里只是講解了iPhone X 一小部分和 iOS 適配題目，還有其他適配的經(jīng)驗(yàn)盼望大家在工作中去積累總結(jié)，我這里就不逐一講解了。
• 因?yàn)?iPhone X的屏幕比例發(fā)生轉(zhuǎn)變，對(duì)于長(zhǎng)期靠「等比縮放」完成適配的H5活動(dòng)頁(yè)而言也有不小的影響，必要對(duì)網(wǎng)頁(yè)結(jié)構(gòu)進(jìn)行適當(dāng)微調(diào)。（細(xì)致縮放的時(shí)候不要把主文體切了，細(xì)致網(wǎng)頁(yè)的布局在 iPhone X 上面的轉(zhuǎn)變）
• 假如你的App有全屏尺寸的活動(dòng)圖，沒(méi)有導(dǎo)航欄，這個(gè)時(shí)候應(yīng)該給開(kāi)發(fā) @2x（750×1334px） 和 @3x(1125×2001) 圖，然后 iPhone X 上的圖會(huì)使用@3x的圖按照高度鋪滿(mǎn)，然后裁切兩邊。（細(xì)致兩側(cè)被裁切區(qū)域不要包含緊張內(nèi)容）

迎接關(guān)注作者的知乎：https://www.zhihu.com/people/olafchou/activities