ViewPort 移動開發前端得勁深入理解

1.ViewPort是什麼

   一般來說，移動上的viewPort就是裝置螢幕上能用來顯示我們網頁的那一塊區域，但是，不侷限於瀏覽器的可視區域的大小，可以比瀏覽器的可視區域大，也可以比瀏覽器的可視區域小，一般預設情況下，移動裝置上的viewport都是大於瀏覽器的可視區域的。  

ul{list-style-type:none;margin:0;padding:0; float:left;clear:right; width:100%;}
li {display:inline;float:left ;width:60px; height:60px; background:#757575;border: solid 1px #ffffff;}
p{ text-align:center;color:#ffffff;}

• iphone

• ipad

• AndroidSamsung

• AndroidHTC

• Chrome

• operaPresto

• BlackBerry

• IE

• 980

• 980

• 980

• 980

• 980

• 980

• 1024

• 1024

2.Css中的1px與移動裝置中的1px比較

   因為移動裝置的解析度不同，在桌面的瀏覽器Css中1px不等於裝置的1px。早期，由於螢幕解析度較低，1個Css畫素有等於一個物理畫素的，但是隨著移動螢幕的畫素密度越來越高，這導致了不同的裝置對應的物理螢幕畫素也不樣。
   使用者縮放會用心到Css中所代表的物理畫素，如當放大一倍時，那麼Css中1px代表的物理畫素也會相應的增加一倍。反之，縮小也一樣。
   在移動端以及桌面瀏覽器中，window物件有一個devicepixeratio屬性，定義為裝置物理畫素與裝置獨立畫素的比例，即 devicepixeRatio=物理畫素/獨立畫素。
 

3.關於PPK的三個viewport的理論

關於PPK的三篇對viewport的地址:  

1.http://www.quirksmode.org/mobile/viewports.html  2.http://www.quirksmode.org/mobile/viewports2.html 3.http://www.quirksmode.org/mobile/metaviewport/

   由於viewport的可視區域有限，不會因為手機解析度而增大，螢幕大小已經限制。所以為了讓為桌面設計的網站在移動端瀏覽，所以瀏覽器預設將viewport設定為一個比較寬的值：980.這個由瀏覽器預設這隻的viewport在ppk中稱為：layout Viewport.  
   該值可以通過：document.documentElement.clientWidth獲取。
   然而，layoutViewport的寬度是大於瀏覽器的寬度的。所以我們需要一個viewport來代表可視區域。（即一個為頁面的實際大小，一個為可視大小）。而這個viewport則被稱為visualViewPort.
   該值可以通過window.innerWidth獲取。
   最後，還將為移動裝置進行單獨設計，可以完美適配於移動裝置的Viewport(可以不需要使用者進行縮放和橫向滾動條就能正常檢視網站的所有內容，文字字型大小無論在哪種解析度下都是一樣大小，圖片等同上)。這個viewport就是IdealViewport  所有iphone的idealViewport寬度都是32opx，無論它的螢幕寬度是320還是640.也就是說，css中的320px就代表iphone螢幕的寬度。
   android的由於裝置不一致，所以較為複雜，可以到http://viewportsizes.com上檢視。
 

4.利用meta標籤對viewport進行控制

    移動裝置預設的viewport是layoutView，在實際開發過程中，我需要的是idealViewport。這就需要meta標籤。   
    如：<meta name="viewport" content="width=device-width,initial-scale=1.0,maxnimum-scale=1.0,user-scalable=0">
    該標籤的作用是讓當前的viewport的寬度等於裝置的刻度，且不允許使用者手動縮放（這個看網站的要求）。
    metaview 最先是蘋果公司在safari中引入，後來安卓可以相容。具體的屬性有：
    1.width:設定layoutviewport的寬度，為整數，或者字串device-width
    2.initial-scale:設定初始的縮放值，為一個數字，可以帶小數
    3.minimum-scale：使用者允許的最小縮放值，為一個數字，可以帶小數
    4.maximun-scale:允許使用者的最大縮放值，為一個數字，可以帶小數。
    5.height：設定layoutviewport的高度，這個高度不常用。
    6.user-scalable:允許使用者進行縮放 值為yes/no
    7.(android特有)target-densitydpi： 值可以為一個數值或者high-肚皮，medium-dpi,low-dpi,device-dpi.當等於device-dpi時，css的畫素與物理的畫素相等。（android決定廢用）
    注意：<meta name="viewport" content="windth=dvice-width">與<mate name="viewport" content="initial-scle=1">的效果都一樣的，都是可以讓當前的viewport寬度等於idealViewport  原因是縮放等於1，而縮放時基於idealViewport縮放的。所以是對ideal viewport進行100%縮放，就是等價於ideal viewport.綜上，因此當width有具體值和initial-scle=1同時設定時，就會有衝突，預設去二者最大那個值。

### 5 關於縮放以及initial-scale的預設值
ideal viewport與縮放是相對的，如當縮放為1時，那麼其viewport與ideal viewport等價。當縮放為2時，則viewport就縮小1倍。如之前為320，放大1倍，就是160。相當於實際寬度不變的情況下，1px變得與原來的2px的長度一樣了。所以之前要320才能填滿的寬度，現在160就可以填滿了。
因此：visual viewport寬度（當前可視區域）＝ideal viewport 寬度/當前縮放值。
注意：安卓自帶的webkit瀏覽器只有在 initial-scale = 1 以及沒有設定width屬性時才是表現正常的，也就相當於這理論在它身上基本沒用；而IE則根本不甩initial-scale這個屬性，無論你給他設定什麼，initial-scale表現出來的效果永遠是1。

6.動態改變meta viewPort標籤

1) 第一種方法

    可以通過document.write來動態輸出輸出viewport
    如： document.write('<mata name ="viewport" content ="width=device-eidth,initial-scale=1">')

2 第二種方法

    可以通過setattribute來改變
    如：
<meta id="testViewport" name="viewport" content="width = 380">
<script>
            var mvp = document.getElementById('testViewport');
            mvp.setAttribute('content','width=480');
</script>·