移動端 設計與開發經驗之ViewPort

標籤：

Viewport ：字面意思為視圖視窗，在移動 web 開發中使用。表示將裝置瀏覽器寬度虛擬成一個特定的值（或計算得出），這樣利於移動 web 網站跨裝置顯示效果基本一致。基本寫法：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1,target-densitydpi=medium-dpi">測試擷取 viewport 的 width ：document.documentElement.clientWidth1、在 iphone 上是讀取 device-width 的值，並自動計算出 target-densitydpi 去適配，在 iphone4 上讀取的值為 320  。最終的計算公式為：當 initial-scale=1 時：ViewportWidth=width  ；當 initial-scale !=1 時：ViewportWidth=width  >  320 / initial-scale ? Width : 320 / initial-scale ;ViewportWidth 不超過 1280 ，大於取 1280  。2、在 android 上，讀取的是 target-densitydpi  。在不設定的情況下，預設選擇的是 medium-dpi(160)  。以下討論均在中螢幕大小的手機上範圍內：Dpi 的分級與其對應的代表解析度：Low-dpi:240*320 （基本淘汰，暫不討論）Medium-dpi:320*480High-dpi:480*800Super high-dpi:640*960   其對應的 dpi 為 120 、 160 、 240 、 320  。實驗一：對 480*800 設定 dpi 為 medium-dpi ，其 viewport 為 320 ；設為 high-dpi  ，其 viewport 為 480 ；設為 device-dpi  ，其 viewport 為 480 ；實驗二：對 540*800 設定 medium-dpi ， viewport 為 360 ；設為 high-dpi  ，其 viewport 為 540 ；設為 device-dpi  ，其viewport 為 540 ；設為 low-dpi  ，其 viewport 為 270 ；總結：從上面兩個實驗可得出：當裝置為 high-dpi 裝置時，設定為中解析度的 viewportwidth 為（ 2/3 ） *device-width ；設定為 low-dpi 時，為（ 1/2 ）*device-width 。這個比例和其 dpi 的比例是一致的， 2/3=160/240 和 1/2=120/240 ；推測 dpi 的值與 viewportwidth 存在一元關係。①假設我要做一個 android high-dpi 裝置應用，虛擬 viewportwidth 定死為 320px 。設 device-width=x ，（ 2/3 ） *x 為該裝置設為 medium-dpi 時 viewportwidth 的值， x/240 表示一個 dpi 值代表多少個 px 。Target-densitydpi=160 - { （ 2/3 ） *x-320}/(x/240);簡化一下： Target-densitydpi=320*240/x ；實驗三：在 540 手機上設定 Target-densitydpi=142 ，其 viewport 為 320  。根據以上公式可以計算出 Target-densitydpi=142.222222 ，與上面測試資料一致。②假設我要做一個 android super-high-dpi 裝置應用，虛擬 viewportwidth 定死為 320px 。Target-densitydpi=320*320/x ；此公式未進行試用期驗證。③假設我要做一個 android medium-dpi 裝置應用，虛擬 viewportwidth 定死為 320px 。Target-densitydpi=160 - {x-320}/(x/160);Target-densitydpi=320*160/x實驗成功④假設我要做一個 android low-dpi 裝置應用，虛擬 viewportwidth 定死為 320px 。Target-densitydpi=160 - { （ 4/3 ） x-320}/(x/120);Target-densitydpi=320*120/x此公式未進行試用期驗證。特例： htcA510E ：在 width 設有具體值時，會讀取 width ，忽略 dpi 。聯想 K1 pad  不讀取 dpi ，唯讀取 width ，而且當 width 小於等於 320 的時候忽視，直接取 device-width 。3、htc input 縮放問題。當 viewport 的值大於 device-width 時，會出現 input 擷取焦點放大。所以在設計中選擇基於 320 解析度（ 240 裝置淘汰不討論），出圖基於 640 ，圖片 0.5 縮放保證清晰度。

總結，在開發時最好基於320寬進行開發，圖片基於640做，在放置圖片時可以用background-size或zoom縮放一倍，圖片在高清晰屏上就不會模糊。在載入頁面時通過讀取裝置的width去計算dpi然後動態產生meta標記，可以很好解決手機的解析度適配問題。但是在android pad端上不適用，原因有二，一、pad對width是計算還是讀取比較混亂，有些像ios，有些讀dpi，還有的兩個都讀，然後分段比較。二、pad的高中低dpi分檔和手機不一樣，沒有統一標準

移動端 設計與開發經驗之ViewPort