什麼是viewport聲明？
viewport是用於開發移動站點的一種meta元信息，主要用來告訴瀏覽器視口大小。
怎麼用？
<meta name="viewport" content="width:device-width, initial-scale=1.0, user-scalable=no, maxinum-scale=1.0, minimum-scale=1.0">上面就是一條完整的viewport聲明，其中 "width=device-width" 表示把viewport設置為設備邏輯大小（後面會講邏輯大小概念），你也可以把它設置成任何你想要的寬度，單位px可帶可不帶
概念
layout viewport
佈局視口，
它總是等於設備屏幕大小，但在以下兩種情況下，前面的結論不成立：
- 沒有聲明viewport
- 根元素html 或 body上設置了固定大小
第一種情況下，viewport使用以下黙認值：
| chrome | safari | firefox | opera |
|---|---|---|---|
| 980 | 980 | 980 | 980 |
第二種情況下，viewport等於設置的固定大小
如果想查看你的手機瀏覽器佈局視口大小，可通過以下代碼獲取：
document.body.clientWidth;
document.body.clientHeight;visual viewport
視覺視口，它是設備屏幕的邏輯大小，它用像素來表示
document.documentElement.clientWidth;
document.documentElement.clientHeight;通過上面的代碼獲取視覺視口的寬高
跟佈局視口一樣，沒有聲明viewport時，大小跟佈局視口一樣。
如果佈局視口大於視覺視口，會出現滾動條。
下面講講設備屏幕的邏輯大小，在開始前，先了解下面3個概念：
- ppi —— 每英寸像素點數量
- 基準ppi—— ≈160/inch
- 顯示比例—— 設備ppi / 基準ppi
現在的手機都是高清屏——肉眼看不出像素點，電腦是普通屏——ppi ≈ 72 ，這樣就出現了一個問題，
在電腦上的14px，放到手機上，視覺大小相當於7px甚至更小，這是因為像素是一個相對單位，它的大小取決於設備像素點大小，這時手機瀏覽器就需要處理一下，把它放大一些，上面的顯示比例就是一個放大倍數，如顯示比例為2，那麼在手機上就用2倍比例來顯示。
ideal viewport
理想視口，顧名思義就是最理想的視口大小——用户無需縮放或滾動就可以瀏覽橫向的全部內容。
它只是一種概念——用於指導開發者設計最理想的頁面大小，它的寬度應為設備邏輯寬度。
關於viewport的知識就講這些，不對的地方歡迎指出
