viewport理解

參考：移動前端開發之viewport的深刻理解

對以上的文章中的知識點，感受換另外一個角度更好理解一點記錄以下：

viewport（視覺窗口）是僅存在於移動web中的一個虛擬容器，用於承載頁面，大部分的viewport寬度都是980px，並且這個容器具有 伸縮性 ，能夠經過viewport來設置是否容許用戶去縮放頁面

 

屏幕的像素密度：區域像素點總數 / 區域大小

css中的1px顯示在像素密度高的屏幕上時，所佔據的像素點要多，之因此要這樣是由於能夠保證，不管在什麼分辨率的手機上顯示css的1px時，都能保證視覺距離是一致的。

縮/放屏幕時，css中的px所佔據的屏幕像素點也會在原來的基礎上按照倍數來進行減小/增長

 

默認狀況下（沒有設置viewport屬性），移動設備上瀏覽器默認的viewport寬度爲980px或1024px【視瀏覽器類型而定】，這個寬度能夠經過如下代碼來獲取

document.documentElement.clientWidth

但若是設置了viewport的寬度爲設備的寬度

  <meta name="viewport" content="width=device-width" /> 

則以上api獲取出來的，就是手機屏幕的寬度了。

 

對頁面的渲染過程，能夠這麼理解：

　　把頁面渲染到一個viewport上，這個容器中的1px與css的1px是一一對應的

　　對於PC瀏覽器來講，頁面直接渲染到瀏覽器上，根本沒有viewport這個概念，瀏覽器有多大，頁面的渲染環境就多大。

　　對於移動端的瀏覽器來講，會相對於PC的渲染過程多出來一個步驟，頁面渲染到viewport（寬度爲980px或者1024px）上以後，會等比例縮放這個viewport容器（縮放比例爲980px|1024px / 手機屏幕的寬度），來適應顯示到手機屏幕上。這就是爲何，默認狀況下，一個頁面能夠在PC上正常顯示，可是到了手機上顯示，所有東西就都縮小了，以下：

當頁面應用了這一句（將移動端的寬度設置爲手機屏幕寬度），這樣顯示到手機屏幕上時，就不須要縮放了，由於viewport容器的寬度和設備的寬度已經同樣了

<meta name="viewport" content="width=device-width" />

效果以下：

在移動端中，當viewport再也不縮放（viewport寬度與設備寬度一致），並且PC中瀏覽器的大小（對頁面的渲染環境）也與手機設備的viewport寬度一致時，手機和PC對於同一個頁面的顯示效果是一致的（根本緣由是由於同一個頁面的渲染寬度同樣，渲染的結果固然也同樣）：

 

 以上只是經過設置寬度來使縮放比例爲1，以達到不縮放的效果。

 實際上還有另外一種方式，能夠直接設置縮放比例爲1，運行效果和上面的一致

<meta name="viewport" content="initial-scale=1">

這裏也能夠這麼理解：雖然設置的是縮放比，但本質上設置的仍是viewport的寬度，實際設置的寬度width = device-width / initaial-scale .

總結：width設置的viewport的大小，而scale用於設置viewport的縮放比例【值爲1時，等比例縮放viewport容器的尺寸，但內部的內容尺寸不變，直到viewport的寬度等於手機屏幕的寬度】，兩個設置能夠同時指定。

 

對於動態設置meta標籤：什麼方式均可以，何時修改或者添加完成，都會當即生效。

標準的移動適配設置：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/>

 這裏可能有個疑問，scale=1 和 width=device-width 均可以分別實現頁面的適配，爲何還要一塊兒寫？答案是一塊兒寫會更加嚴謹一點 - -！