viewport預備知識 dpr === dppx dpr：device pixel ratio 設備像素比 dppx：Number of dots per px unit 每像素有多少點 。 1dppx = 96dpi dpr = 設備物理像素 / 設備獨立像素 設備物理像素指顯示在移動端中實際的 ...
viewport預備知識
dpr === dppx
dpr：device pixel ratio 設備像素比
dppx：Number of dots per px unit 每像素有多少點 。 1dppx = 96dpi
dpr = 設備物理像素 / 設備獨立像素
設備物理像素指顯示在移動端中實際的像素。設備獨立像素是css中定義的像素。
比如說iphone4 的 dpr = 2，而此時設置border的寬度為1px（設備獨立像素），那麼此時設備物理像素為2px。所以在移動端上看到的是2px的邊框。
也就是說，n個獨立像素 = dpr * m 個物理像素。
window.innerWidth：保存可見視口，也就是屏幕上可見頁面區域的大小。移動IE不支持這個屬性。
document.body.clientWidth：度量佈局視口，即渲染後頁面的實際大小（與可見視口不同，可見視口只是頁面中的一小部分）。
viewport
viewport就是設備的屏幕上能用來顯示網頁的那一塊區域，具體一些，就是瀏覽器上用來顯示網頁的那部分區域。
預設情況下，移動設備上的viewport都是大於瀏覽器可視區域的。這種預設的設置是為了考慮到移動設備能夠正常訪問到為PC設計的網站。移動設備上的viewport預設情況下為980px或者1024px。
但移動設備上預設的viewport帶來的結果就是mobile瀏覽器在瀏覽網站時會出現橫向滾動條。因為移動設備上瀏覽器的viewport（visual viewport）是比移動設備預設的viewport（layout viewport）的寬度要小很多的。
layout viewport
移動端預設viewport。layout viewport與PC端瀏覽器的區域寬度相同。目的是使為PC端開發的頁面同樣可以顯示在移動端上。layout viewport可以通過document.body.clientWidth獲取。
layout viewport 不會隨著用戶雙擊屏幕時發生改變。下圖是double click之前的效果。
visual viewport
移動端瀏覽器實際的可視區域的寬度。預設情況下，layout viewport的寬度是大於visual viewport的。visual viewport可以通過window.innerWidth獲取。
visual viewport 會隨著用戶雙擊屏幕時發生改變。下圖是double click之後的效果。
ideal viewport
ideal viewport指的是首先不需要用戶縮放和橫向滾動條就能正常的查看網站的所有內容。然後，顯示的文字的大小是合適。比如一段14px大小的文字，不會因為在一個高密度像素的屏幕里顯示得太小而無法看清，理想的情況是這段14px的文字無論是在何種密度屏幕，何種解析度下，顯示出來的大小都是差不多的。當然，不只是文字，其他元素如圖片什麼的也是這個道理。
ppk把這個viewport叫做 ideal viewport，也就是第三個viewport——移動設備的理想viewport。
ideal viewport並沒有一個固定的尺寸，不同的設備擁有有不同的ideal viewport。iphone4和iphone3的ideal viewport寬度都是320px，無論它的屏幕寬度是320還是640，也就是說，在iphone4和iphone3中，css中的320px就代表它們屏幕的寬度。
meta標簽解析
<meta name = 'viewport' content = "width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1 >width=device-width：layout viewport的寬度等於設備寬度，這裡的設備寬度指的是visual viewport，layout viewport = visual viewport 就可以得到 ideal viewport
initial-scale：初始縮放比例。這裡說的縮放比例是指layout viewport與visual viewport的比例。當比例為1時就表示兩個值相等，則變成了ideal viewport了。initial-scale成立的前提條件是必須禁止用戶縮放頁面的行為，因為visual viewport會隨著用戶縮放頁面而改變，那麼此時initial-scale的值就不准確了。
所以這裡可以width=device-width和initial-scale作用是等價的，都是用於控制layout viewport和visual viewport的值是否相等。
minimum-scale：允許用戶的最小縮放比例，為一個數字，可以帶小數。
maximum-scale：允許用戶的最大縮放比例，為一個數字，可以帶小數。
user-scalable：是否允許用戶進行縮放，值為"no"或"yes", no 代表不允許，yes代表允許。
經過我的測試，在移動前端開發meta標簽設置時，content屬性的必須設置的是user-scalable，width=device-width和initial-scale=1其中選一。單獨設置maximum-scale和minimum-scale是不起作用的。即
有效：<meta name='viewport' content='width=device-width, user-scalable=1'>
有效：<meta name='viewport' content='initial-scale=1, user-scalable=1'>
無效：<meta name='viewport' content='maximum-scale=1, minimum-scale=1, user-scalable=1'>
要把當前的viewport寬度設為ideal viewport的寬度，既可以設置 width=device-width，也可以設置 initial-scale=1，但這兩者各有一個小缺陷，就是iphone、ipad以及IE 會橫豎屏不分，通通以豎屏的ideal viewport寬度為準。所以，最完美的寫法應該是，兩者都寫上去，這樣就 initial-scale=1 解決了 iphone、ipad的毛病，width=device-width則解決了IE的毛病。
