手機屏幕適配原理及實現

手機屏幕是用戶與 App 最直接的交互點 
不一樣的分辨率下用戶對咱們的 App 具備明顯的感觀差別，主流分辨率的更新迭代卻又徹底獨立於 App 進行。這讓咱們想要使 App 在絕大多數主流手機上都保持感觀、體驗的一致性提出了很大的挑戰。

屏幕尺寸 
嚴格來講，屏幕尺寸實際被物理尺寸和顯示分辨率兩個部分定義。 
而咱們今天對各種手機、Pad 設備所說的屏幕尺寸，只指物理尺寸。 
若是一塊手機屏幕的物理尺寸是 5.5 英寸，便是指該手機屏幕對角線的長度。

屏幕分辨率 
屏幕分辨率是指屏幕圖像的精密度，是顯示器所能顯示的像素的具體數值。 
如一個手機標稱分辨率是 720 x 1280，即表示屏幕橫向由 720 個像素點組成，縱向由 1280 個像素點組成。 
因爲屏幕上的點、線和麪都是由像素組成的，屏幕具有的像素點越多，畫面就越精細。 
分辨率越高，單位面積內顯示的信息就越多，咱們能看到的內容就越多。

屏幕比例 
屏幕比例是指屏幕的寬度與高度的比例，今天更多指分辨率的比例，即 
屏幕比例 = 屏幕橫向分辨率 / 屏幕縱向分辨率 
此外，在各種設備、平臺之間也有一些比較經常使用的比例，同時也推薦你們在開發對應設置或平臺的應用時使用推薦比例。 
使用推薦比例可讓用戶在使用咱們的 App 時更溫馨，帶來更好的使用體驗。 
在這裏爲開發者提供一張簡單的表格，記錄了使用 APICloud 技術開發應用時四大平臺產品的主流顯示比例。 
能夠看出主流應用更推薦使用 16 : 9 的屏幕比例 

DPI 
DPI（Dots Per Inch），每英寸所擁有的點數，原用於打印機、鼠標的精確度指標。 
在屏幕方面通常使用 PPI 來表示精度。

PPI 
PPI（Pixels Per Inch），每英寸所擁有的像素數，屏幕的 PPI 越高，表示屏幕中的每一個像素點之間的距離越接近，像素的密度越高，這樣屏幕內容看起來就更加細膩、真實。 
而當 PPI 超過 300 時，屏幕被認爲達到了視網膜級別，通常狀況下人眼已經較難察覺 300 以上 PPI 之間的差異。

計算公式： 

以 iphone 6 plus 爲例，屏幕分辨率 1080 x 1920，屏幕尺寸 5.5 英寸 
PPI = √(1920 ^ 2 + 1080 ^ 2) / 5.5 = 400.5285…… ≈ 400

屏幕密度（Density） 
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 值。 

縮放倍率（scaleFactor） 
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 值。 

邏輯分辨率 
邏輯分辨率在 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

推薦 UI 尺寸 
APICloud 應用中的頁面均使用邏輯分辨率來顯示元素，考慮到屏幕比例、實際換算難度等因素，咱們推薦您選擇 720 x 1280 分辨率爲標準制做 UI 設計圖。 
量圖標準 
• 絕對計量 
o 優先考慮絕對計量類的單位，如 px 單位 
• 相對計量 
o 若是使用 px 等絕對計量值沒法實現所需佈局時，能夠考慮使用 rem，百分比等單位 
o 選擇百分比作爲元素寬度、高度單位時，推薦只使用 100%，而不使用非 100% 的值，此類數值較容易出現頁面變形 
• 使用 640 x 960 或 720 x 1280 的 UI 設計圖，應先量出元素的寬或高對應的 px 值，再除以 2 獲得書寫樣式時的確切數值 
o 如：一個按鈕在 720 x 1280 的設計圖中佔具了 160 px 寬，88 px 高，咱們的樣式應該指定該按鈕 width:80px;height:44px 
• 彈性盒子 
o 當絕對計量和相對計量均沒法輕易實現所需佈局時，能夠考慮使用彈性盒子（flex、box） 
o 因爲 iOS 和 Android 系統瀏覽器都使用 -webkit- 標準，彈性盒子樣式只須要適配 -webkit- 便可 
• box-sizing 
o 咱們還能夠利用樣式屬性 position 來實現特殊佈局，將元素指定爲 position:relation 或 position:absolute，同時結合樣式屬性 box-sizing 改變盒子計算方式並指定具體的padding 值完成佈局

viewport 
viewport 是由 Apple 公司爲了讓更多桌面網站能夠在 safari 瀏覽器內正常顯示而推出的解決方案，後被各大瀏覽器支持。 
使用 viewport 能夠自定義當前頁面在瀏覽器中以何種分辨率顯示。 
而 APICloud 應用因爲在引擎層作了多屏幕適配工做，如手動指定 viewport 爲某個具體的數值時，可能會形成咱們的應用頁面顯示變形。 
在 APICloud 應用中，咱們推薦您使用下述代碼設置 viewport 以保證您的應用顯示正常：