來人人都是産品經理【起點學院】，BAT實戰派産品總監手把手系統帶你學産品、學運營。

手機适配，這個詞都聽爛了。可是，你确定你懂嗎？經常會聽到程序猿說：這個我适配一下？這個我沒有适配好？......然後你問程序猿，你是怎麼适配的？能說明白的沒有幾個。這個是系統自動适配的？這個有套算法？再往下問，就沒有然後了......

把這個問題抛給設計獅，很可能給你的答複是，你問程序猿啊？是他們适配的啊......場景是不是有點熟悉。

一、什麼是手機适配？

言歸正傳，什麼是手機适配？手機适配：設計獅制作效果圖，程序猿把效果圖應用到不同的手機，對不同的屏幕進行界面調整的過程，确保界面不變形，呈現效果圖的位置、尺寸、比例。

二、關于屏幕的一些物理概念

1.屏幕物理尺寸：屏幕對角線的尺寸。

例如：蘋果最新發布了4英寸iPhone SE，這個4英寸指的就是手機的屏幕物理尺寸。

iPhone SE屏幕：長度9.0cm、寬度5.1cm

PS：1英寸(in)=2.54厘米(cm)

2.屏幕分辨率：确定計算機屏幕上顯示多少信息的設置，以水平和垂直像素來衡量。

例如：iPhone SE分辨率為1136×640（像素）。

3.屏幕密度（pixel per inch）：每英寸的像素數，簡稱ppi。

例如：iPhone SE 像素密度達到326ppi。

已知iPhone SE屏幕物理尺寸為4寸；通過屏幕分辯率得到屏幕對角線的像素總數；屏幕對角線的像素總數和屏幕物理尺寸比，就得到了ppi。

屏幕物理尺寸決定了屏幕的實際尺寸，屏幕分辨率表示屏幕上可以呈現的像素點數，屏幕密度決定了屏幕的精細程度。

三、開始手機适配吧

已知iPhone SE分辨率為1136×640（像素），讓設計獅制作一套分辨率為1136×640（像素）圖片；

iPhone SE分辨率為1334×750（像素），再讓設計獅制作一套分辨率為1334×750（像素）圖片

以此往複

來看看市場上主流的屏幕分辨率

數據來自友盟指數

如此之多的分辨率，怎麼可能一一做圖呢？

眼尖的同學可能注意到一個東西，就是屏幕的分辯率基本符合17/9比例。

例如：iPhone SE分辨率為1136×640（像素），1136/640»17/9；iPhone SE分辨率為1334×750（像素），1334/640»17/9。

17/9這個比例有一個專有名詞，叫做長寬比（寬高比），即一個影像的寬度除以它的高度所得的比例，通常表示為 “x:y”或“x×y”，其中的冒号和叉号表示中文的“比”之意。

對于相同長寬比，可以使用同一套效果圖，通過放大或縮小的方式來進行界面調整。雖然引入了長寬比，可以大大降低制作效果圖的數量，但是對面如此之多的手機産家，這個數量還是有點大。

四、工作量太大，讓dp來幫忙

此時，又要引入一個物理概念，設備獨立像素（device independent pixels），android系統中單位，簡稱dp(dip)。

dp是設備像素，px是屏幕像素，它們之間是可以換算的；1dp表示在屏幕點密度為160ppi時1px長度，這個定義非常重要。通過定義，可以計算出每個手機dp和px的關系。

dp與px關系，根據定義，就是把手機的ppi/160ppi得出，手機的ppi前面已經得出。

通過dp與px關系，手機适配就變得簡單了，就是1x、2x、3x、4x，這些名詞大家應該也有聽過，指的就是dp與px關系。此時也不用糾結比較特殊的長寬比了，比如iphone 4s和MEIZU MX2。雖然dp是android系統中單位，應用到IOS手機中，在換算成px的過程中，原理是相通的，與系統無關。

目前市場主流的是2x屏手機，3x屏手機也逐漸流行起來了，也就是大屏機。

對于不同的“dp與px關系”有幾種适配的方式：

1. 有幾種關系，制作幾套圖。
2. 隻制作2x圖，對于3x和4x圖進行拉伸，圖片有一定程度失真。
3. 隻制作3x圖，對于2x進行壓縮，圖片有一定變形；對于4x圖進行拉伸，圖片有一定程度失真。
4. 隻制作3x圖，對于2x進行壓縮，圖片有一定變形；對于4x圖進行拉伸，圖片有一定程度失真；對于失真和變形的位置，重新制作圖片适配。

通過“dp與px關系”加上壓縮和拉伸，理論上一套效果圖就可以搞定手機适配了。至于想得到更優的适配效果，必然需要更多的圖片。看似簡單的手機适配，也有這麼多的學問。手機适配，現在你應該懂了吧。

本文由 @jxwsina 原創發布于人人都是産品經理 ，未經許可，禁止轉載。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部