移動端--螢幕適配基礎資訊
螢幕適配相關概念
開始接觸移動端時，對於多種移動端的不同解析度、尺寸等造成的螢幕適配問題非常頭大，甚至對其中的術語很是模糊，這是閱讀APICloud時感覺寫的比較清晰的文章，以後會不斷的新增補充閱讀後的點，以增加對該知識的學習
手機螢幕是使用者與 App 最直接的互動點
不同的解析度下使用者對我們的 App 具有明顯的感觀差異，主流解析度的更新迭代卻又完全獨立於 App 進行。這讓我們想要使 App 在絕大多數主流手機上都保持感觀、體驗的一致性提出了很大的挑戰。
開發者在開發移動應用時，經常會碰到選擇什麼標準的 UI 設計圖、如何保證開發出的頁面在不同解析度下保持元素不變形等問題
現在，可以通過此文件瞭解關於 應用螢幕適配的相關知識。
螢幕適配原理
| - | - | - | - |
|---|---|---|---|
| 螢幕尺寸 | 裝置畫素 | 物理畫素 | CSS畫素 |
| 裝置獨立畫素 | 裝置畫素比dpr | 螢幕解析度 | 螢幕比例 |
| 螢幕密度單位DPI | 螢幕精度PPI | 螢幕密度（Density） | 縮放倍率（scaleFactor） |
| 邏輯解析度 | 推薦 UI 尺寸 | 量圖標準viewport | 螢幕適配示例 |
螢幕尺寸
嚴格來說，螢幕尺寸實際被物理尺寸和顯示解析度兩個部分定義。
而我們今天對各類手機、Pad 裝置所說的螢幕尺寸，只指物理尺寸。
如果一塊手機螢幕的物理尺寸是 5.5 英寸，即是指該手機螢幕對角線的長度。
閱讀到這裡產生了疑問，不是長、寬定義螢幕麼？為什麼這裡直接給了一個對角線的長度？是因為長寬比例比較固定所以一旦確定了對角線的長度，直接可以確定長寬麼？（直覺應該是因為該原因）
首先，不用懷疑，英寸確實是長度單位
裝置畫素
dp(device pixels, 裝置畫素)，也叫物理畫素。
物理畫素
物理畫素又被稱為裝置畫素，是顯示裝置中一個最微小的物理部件。每個畫素可以根據作業系統設定自己的顏色和亮度。所謂的一倍屏、二倍屏(Retina)、三倍屏，指的是裝置以多少物理畫素來顯示一個CSS畫素，也就是說，多倍屏以更多更精細的物理畫素點來顯示一個CSS畫素點，在普通螢幕下1個CSS畫素對應1個物理畫素，而在Retina螢幕（也即視網膜顯示屏）下，1個CSS畫素對應的卻是4個物理畫素。
CSS畫素
CSS畫素是一個抽像的單位，主要使用在瀏覽器上，用來精確度量Web頁面上的內容。一般情況之下，CSS畫素稱為與裝置無關的畫素(device-independent pixel)，簡稱DIPs。CSS畫素顧名思義就是我們寫CSS時所用的畫素。
裝置獨立畫素
dip（device independent pixels，裝置獨立畫素）與螢幕密度有關。dip可以用來輔助區分視網膜裝置還是非視網膜裝置。
裝置畫素比dpr
裝置畫素比(device pixel ratio)簡稱為dpr，其定義了物理畫素和裝置獨立畫素的對應關係。它的值可以按下面的公式計算得到：
裝置畫素比 ＝ 物理畫素 / 裝置獨立畫素(1個css畫素/裝置畫素)
在Retina屏的iphone上，devicePixelRatio的值為2，也就是說1個css畫素相當於2個物理畫素。通常所說的二倍屏(retina)的dpr是2, 三倍屏是3。
viewport中的scale和dpr是倒數關係。
獲取當前裝置的dpr：
JavaScript: window.devicePixelRatio。
CSS:
-webkit-device-pixel-ratio,
-webkit-min-device-pixel-ratio,
-webkit-max-device-pixel-ratio。
不同dpr的裝置，可根據此做一些樣式適配(這裡只針對webkit核心的瀏覽器和webview)。
螢幕解析度
螢幕解析度是指螢幕影象的精密度，是顯示器所能顯示的畫素的具體數值。
如一個手機標稱解析度是 720 x 1280，即表示螢幕橫向由 720 個畫素點組成，縱向由 1280 個畫素點組成。
由於螢幕上的點、線和麵都是由畫素組成的，螢幕具備的畫素點越多，畫面就越精細。
解析度越高，單位面積內顯示的資訊就越多，我們能看到的內容就越多。
螢幕比例
螢幕比例是指螢幕的寬度與高度的比例，今天更多指解析度的比例，即
螢幕比例 = 螢幕橫向解析度 / 螢幕縱向解析度
此外，在各類裝置、平臺之間也有一些比較常用的比例，同時也推薦大家在開發對應設定或平臺的應用時使用推薦比例。
使用推薦比例可以讓使用者在使用我們的 App 時更舒適，帶來更好的使用體驗。
在這裡為開發者提供一張簡單的表格，記錄了使用 APICloud 技術開發應用時四大平臺產品的主流顯示比例。
可以看出主流應用更推薦使用16 : 9的螢幕比例
| 平臺 | 螢幕解析度 | 螢幕比例 |
|---|---|---|
| Apple Watch | 272 x 340 | 4 : 5 |
| - | 312 x 390 | 4 : 5 |
| Phone | 320 x 480 | 2 : 3 |
| - | 480 x 800 | 3 : 5 |
| - | 640 x 960 | 2 : 3 |
| - | 720 x 1280 | 9 : 16 |
| - | 1080 x 1920 | 9 : 16 |
| - | 1440 x 2560 | 9 : 16 |
| Pad | 1280 x 720 | 16 : 9 |
| - | 1920 x 1080 | 16 : 9 |
| - | 1920 x 1200 | 16 : 10 |
| - | 2048 x 1536 | 4 : 3 |
| TV | 1280 x 720 | 16 : 9 |
| - | 1920 x 1080 | 16 : 9 |
螢幕密度單位DPI
DPI（Dots Per Inch），每英寸所擁有的點數，原用於印表機、滑鼠的精確度指標。
在螢幕方面一般使用 PPI 來表示精度。
螢幕精度PPI
PPI（Pixels Per Inch），每英寸所擁有的畫素數，螢幕的 PPI 越高，表示螢幕中的每個畫素點之間的距離越接近，畫素的密度越高，這樣螢幕內容看起來就更加細膩、真實。
而當 PPI 超過 300 時，螢幕被認為達到了視網膜級別，一般情況下人眼已經較難察覺 300 以上 PPI 之間的差別。
計算公式： PPI 計算公式
PPI = 對角線解析度/螢幕尺寸
對角線解析度 = √(橫向解析度 ^ 2 + 縱向解析度 ^ 2)
以 iphone 6 plus 為例，螢幕解析度 1080 x 1920，螢幕尺寸 5.5 英寸
PPI = √(1920 ^ 2 + 1080 ^ 2) / 5.5 = 400.5285…… ≈ 400
螢幕密度（Density）
-- 主要用於Android
Density 由 Android 1.6 版本（Android API Level 4）為了適配不同大小的螢幕而提出，表示每英寸有多少個顯示點(邏輯值)，它的單位是 DPI。
在 Android 原生開發中，常常使用 dp/dip/sp 等單位來定義檢視、文字的寬高
理論上當 Density 的值為 160 DPI 時，1px = 1dp，當前螢幕的 Density 為 320 DPI 時，2px = 1dp
在這裡為開發者提供一張簡單的表格，記錄了幾種主流 Android 手機的 Density 值。
| 螢幕解析度 | 螢幕密度（Density） |
|---|---|
| 240 x 400 | 120 |
| 320 x 533 | 160 |
| 480 x 800 | 240 |
| 640 x 960 | 320 |
| 720 x 1280 | 320 |
| 1080 x 1920 | 480 |
| 1440 x 2560 | 560 |
縮放倍率（scaleFactor）
-- 主要用於iPhone
scaleFactor 由 Apple 公司為 iPhone 螢幕適配定義的標準。
早期的 iPhone 3GS 的螢幕解析度是 320 x 480（PPI = 163），iOS 繪製圖形（CGPoint/CGSize/CGRect）均以點（point）為單位（measured in points）：
1 point = 1 pixel
後來在 iPhone 4 中，同樣大小（3.5 inch）的螢幕採用了 Retina 顯示技術，橫、縱向方向畫素密度都被放大到2倍，畫素解析度提高到 (320 x 2) x (480 x 2) = 640 x 960（PPI = 326）， 顯像解析度提升至 iPhone 3GS 的 4 倍（1 個 Point 被渲染成 1 個 2 x 2 的畫素矩陣）。
但是對於開發者來說，iOS 繪製圖形的 API 依然沿襲 point（pt，注意區分印刷行業的“磅”）為單位。在同樣的邏輯座標系下（320 x 480）：
1 point = scale x pixel
在 iPhone 4 ~ 6 中，縮放因子 scale = 2；在 iPhone 6 plus 中，縮放因子 scale = 3，可以理解為：
scale = 絕對長度比（point / pixel）= 單位長度內的數量比（pixel / point）
其中 iPhone 6 Plus 的 scale = 3 只是為了書寫方便，實際會在渲染時被 iOS 系統轉換，除以 1.15，變為 2.608 倍左右
在這裡為開發者提供一張簡單的表格，記錄了幾種主流 iPhone 手機的 scaleFactor 值。
| 機型 | 螢幕解析度 | 縮放倍率 |
|---|---|---|
| iPhone 3GS | 320 x 480 | 1 |
| iPhone 4/4S | 640 x 960 | 2 |
| iPhone 5/5S | 640 x 1136 | 2 |
| iPhone 6/6S | 750 x 1334 | 2 |
| iPhone 6 Plus/6S Plus | 1080 x 1920 | 3 |
邏輯解析度
邏輯解析度在 APICloud 應用中也可以被當做顯示解析度使用。
邏輯解析度與螢幕解析度在當今的主流裝置中是不相同的，公式為：
邏輯解析度 = 螢幕解析度 / 螢幕倍率
在 Android 系統中，根據 DP 的定義 1dp = 1px 時， Density 為 160，可知公式為：
Android 螢幕倍率 = Density / 160
如 iPhone 4 的螢幕解析度為 640 x 960，邏輯解析度為：
640 / 2 x 960 / 2 = 320 x 480(直接根據上表倍率計算邏輯解析度)
而小米 2 的螢幕解析度為 720 x 1280，Density 為 320，邏輯解析度為：
720 / (320 / 160) x 1280 / (320 / 160) = 360 x 640（根據密度計算倍率再計算邏輯解析度）
閱讀分析
剛剛讀完以上邏輯解析度時是有些懵的，為什麼邏輯解析度的計算方式不同，然後又仔細閱讀了之前的文章，發現應該是IOS與Android 的已知資訊應該是不同的：
iPhone ：一般知道的是iPhone 的倍率；
Android ：一般知道的是Android 的螢幕密度（Density）
推薦 UI 尺寸
APICloud 應用中的頁面均使用邏輯解析度來顯示元素，考慮到螢幕比例、實際換算難度等因素，我們推薦您選擇 720 x 1280 解析度為標準制作 UI 設計圖。
量圖標準
-
絕對計量
- 優先考慮絕對計量類的單位，如 px 單位
-
相對計量
- 如果使用 px 等絕對計量值無法實現所需佈局時，可以考慮使用 rem，百分比等單位
- 選擇百分比做為元素寬度、高度單位時，推薦只使用 100%，而不使用非 100% 的值，此類數值較容易出現頁面變形
-
使用 640 x 960 或 720 x 1280 的 UI 設計圖，應先量出元素的寬或高對應的 px 值，再除以 2 得到書寫樣式時的確切數值
- 如：一個按鈕在 720 x 1280 的設計圖中佔具了 160 px 寬，88 px 高，我們的樣式應該指定該按鈕 width:80px;height:44px
-
彈性盒子
- 當絕對計量和相對計量均無法輕易實現所需佈局時，可以考慮使用彈性盒子（flex、box）
- 由於 iOS 和 Android 系統瀏覽器都使用 -webkit- 標準，彈性盒子樣式只需要適配 -webkit- 即可
-
box-sizing
- 我們還可以利用樣式屬性 position 來實現特殊佈局，將元素指定為 position:relation 或 position:absolute，同時結合樣式屬性 box-sizing 改變盒子計算方式並指定具體的padding 值完成佈局
viewport
viewport 是由 Apple 公司為了讓更多桌面網站可以在 safari 瀏覽器內正常顯示而推出的解決方案，後被各大瀏覽器支援。
使用 viewport 可以自定義當前頁面在瀏覽器中以何種解析度顯示。
而 APICloud 應用由於在引擎層做了多螢幕適配工作，如手動指定 viewport 為某個具體的數值時，可能會造成我們的應用頁面顯示變形。
在 APICloud 應用中，我們推薦您使用下述程式碼設定 viewport 以保證您的應用顯示正常：
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
閱讀完本文可以對基本概念有個瞭解，但是關於適配問題仍需進一步的知識瞭解
原文網址：https://docs.apicloud.com/Dev-Guide/screen-adapt-guide#s1