手機屏幕適配原理及實現
手機屏幕是用戶與 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 以保證您的應用顯示正常:
rachel_4869 發佈於Android開發者 21分鐘前 分享到:
推薦閱讀: