手機屏幕是用戶與 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 以保證您的應用顯示正常：?