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.clientWidth

一、在 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  。

二、在 android 上，讀取的是 target-densitydpi  。在不設置的狀況下，默認選擇的是 medium-dpi(160)  。如下討論均在中屏幕大小的手機上範圍內：

Dpi 的分級與其對應的表明分辨率：

Low-dpi:240*320 （基本淘汰，暫不討論）

Medium-dpi:320*480

High-dpi:480*800

Super 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 。

三、htc input 縮放問題。當 viewport 的值大於 device-width 時，會出現 input 獲取焦點放大。因此在設計中選擇基於 320 分辨率（ 240 設備淘汰不討論），出圖基於 640 ，圖片 0.5 縮放保證清晰度。

總結，在開發時最好基於320寬進行開發，圖片基於640作，在放置圖片時能夠用background-size或zoom縮放一倍，圖片在高清晰屏上就不會模糊。在加載頁面時經過讀取設備的width去計算dpi而後動態生成meta標記，能夠很好解決手機的分辨率適配問題。可是在android pad端上不適用，緣由有二，1、pad對width是計算仍是讀取比較混亂，有些像ios，有些讀dpi，還有的兩個都讀，而後分段比較。2、pad的高中低dpi分檔和手機不同，沒有統一標準

首發地址：http://www.appmobicn.com/thread-307-1-1.html