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分檔和手機不同，沒有統一標準