前言：
本文是在閱讀關于viewport的兩篇文章后，對于這些常常忘記和混淆的的知識有了一定的理解，為了方便以后查詢和使用，以此文記錄。如果你在看完此文后還是一知半解，可以點擊這里查看原文。
一、設備像素和css像素
設備像素：
對于pc來說，設備像素就是屏幕的分辨率，比如1366*768，就是將屏幕橫向分為1366個像素，縱向分為768個像素。一般來說，這個參數是固定不變的，但是你可以通過pc的顯示設置去調節它，但沒有人會去把分辨率調整到讓自己不舒適的狀態。
這個屬性可以通過JavaScript的screen.width/height屬性得到。
css像素：
當你對某個div塊設置width:100px;并設置背景顏色時，在瀏覽器中這個顏色的區域寬度就是100px的css像素。css像素的大小可以通過瀏覽器的縮放進行調節的。假設你的瀏覽器頁面縮放為100%，此時一個css像素就對應1個設備像素；如果你將頁面放大至200%，那么一個css像素就對應4個設備像素，因為寬和高都被拉伸了1倍。通過幾張圖片應該能夠更好的理解它。
這是100%縮放時，css像素和設備像素完全重合
縮小頁面比例，css像素變小，一個設備像素覆蓋了多個css像素
放大頁面比例，css像素變大，一個css像素覆蓋多個設備像素
二、屬性
2.1 screen.width、screen.height
屏幕的分辨率，一般是不變的，度量單位為設備像素。
2.2 window.innerWidth、window.innerHeight
瀏覽器的內部尺寸，包括了滾動條，度量單位為css像素。
調整瀏覽器大小會改變值，改變頁面的縮放比例也會改變值，因為它是用css度量的。
2.3 window.pageXOffset、window.pageYOffset
頁面橫向滾動距離和縱向滾動距離，可以理解為當前視口頂部與頁面頂部的距離，度量單位為css像素。當頁面上下或者左右滾動時，相應的值會發生變化。
2.4 document.documentElement.clientWidth / Height
viewport尺寸，用css像素度量，不包括滾動條。即頁面目前的可視窗口，調整瀏覽器大小和進行頁面縮放會改變它的大小
2.5 document.documentElement.offsetWidth / Height
<html>元素的尺寸，用css像素度量。是整個頁面的大小，如果你對html元素設置了固定的width和height，那么調整瀏覽器大小和進行頁面的縮放不會改變它的大小。
viewport
首先要明確一點關系，屏幕顯示器包含了瀏覽器，瀏覽器包含了viewport，viewport中包含了<html>元素。并且
document.documentElement.clientWidth / Height 指向viewport的大小
document.documentElement.offsetWidth / Height 指向html元素的大小
雖然viewport包含了html元素，實際上html元素是可以比viewport大的（你需要手動設置這個值）。通常開發者都不會去設定html元素的大小，那么此時html元素的大小時就是viewport的大小,你可以打開控制臺，輸入下面這條語句，結果一定是返回true。
console.log(document.documentElement.clientWidth===document.documentElement.offsetWidth)
現在你可以打開編輯器，設置html的寬度為1000px或者其他，只要不等于viewport的寬度就行，再在控制臺輸入這條語句，結果一定是返回false。
三、事件中的坐標
3.1 pageX、pageY
表示相對于<html>元素的以css像素度量的事件坐標。
3.2 clientX、clientY
表示相對于viewport的以css像素度量的事件坐標。
3.3 screenX、screenY
表示相對于屏幕的以設備像素度量的事件坐標，一般是不會用到的。
四、媒體查詢
@media all and(max-width:500px){...}
在媒體查詢中，width和height查詢的是viewport的寬高，以css像素度量
@media all and(max-device-width:500px){...}
device-width和device-height查詢的是屏幕的寬高，是以設備像素作為度量的，這個參數一般是不變的，因此這個參數對于響應式的開發者來說是沒有用處的。
五、移動瀏覽器的viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
在移動web的開發中，常常可以看到這個標簽，要了解這個各個參數的含義，首先要明白兩個移動瀏覽器中的兩個viewport：layout viewport和visual viewport。
layout viewport
這是 stack overflow上的George Cummins解釋：
把layout viewport想像成為一張不會變更大小或者形狀的大圖。現在想像你有一個小一些的框架，你通過它來看這張大圖。（譯者：可以理解為「管中窺豹」）這個小框架的周圍被不透明的材料所環繞，這掩蓋了你所有的視線，只留這張大圖的一部分給你。你通過這個框架所能看到的大圖的部分就是visual viewport。當你保持框架（縮小）來看整個圖片的時候，你可以不用管大圖，或者你可以靠近一些（放大）只看局部。你也可以改變框架的方向，但是大圖（layout viewport）的大小和形狀永遠不會變。
visual viewport
手機屏幕的大小就是visual viewport，即手機屏幕能顯示的大小。
看看Chris給出的解釋
visual viewport是頁面當前顯示在屏幕上的部分。用戶可以通過滾動來改變他所看到的頁面的部分，或者通過縮放來改變visual viewport的大小。
本人的理解是：想象你在高空中俯瞰大地，投入你視野的便是visual viewport，可以通過調整你的高度來調整你的visual viewport大小，高度越低，看到的范圍越小（放大），高度越高，看到的范圍越大（縮小）；而整個大地，即layout viewport的大小和形狀是不會變的。
假設用css單位來衡量的話，那么layout viewport大小不變，即它的css像素大小不變，在手機屏幕上可以通過縮放來調節visual viewport的大小，當放大時，單位css像素所占的屏幕像素變大，因此整個屏幕的所占有的css像素變少，于是visual viewport變小；同理，當縮小時，visual viewport會變大。
兩個viewport的關系：
通常來說，pc的顯示器都遠遠大于手機，因此能顯示的內容更多，可以認為在桌面瀏覽器中的html元素的大小即是整個layout viewport的大小。而在移動設備上，如果不對頁面進行縮小，那么屏幕上只能看到layout viewport的一部分，就像這樣
想要看到更多的layout viewport，那么就只能進行縮小。當layout viewport完全縮小在手機屏幕中時，此時兩個viewport的大小時相等的。
度量layout viewport
同桌面瀏覽器一樣，可以用document.documentElement.clientWidth / Height，這個屬性指向了layout viewport的尺寸
度量visual viewport
window.innerWidth/Height可以用來度量visual viewport的尺寸，當用戶縮小或者放大的時候，度量的尺寸會發生變化，因為屏幕上的CSS像素會增加或者減少。這和上面關于css的關于visual viewport的假設一致。
媒體查詢
width和height使用layout viewport作為參照物，device-width和device-height仍然以設備像素作為參照，換句話說，
width和height以document.documentElement.clientWidth/Height為參照
device-width和device-height以screen.width/height為參照
meta標簽
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
現在可以對meta標簽來進行解釋了
width=device-width：表示layout viewport大小為設備像素大小
initial-scale=1.0：表示初始縮放為1
minimum-scale=1.0：表示最小縮放為1
maximum-scale=1.0：表示最大縮放為1
user-scalable=no：表示不允許用戶縮放
對于不同的手機瀏覽器，其規定的layout viewport大小不一，Safari iPhone為980px，Opera為850px，Android WebKit為800px，最后IE為974px。可以通過width來重置其大小。
假設你在一臺iPad設備（設備像素為768*1024）上運行如下標簽
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=yes">
那么其layout viewport即document.documentElement.clientWidth/Height為768，就算縮放也不會改變大小；
而其visual viewport :window.innerWidth/Height則會隨著縮放而改變大小。
因此，當設置layout viewport為設備像素大小且禁止縮放時，就能使兩個viewport的大小相等，從而使設置了媒體查詢樣式的頁面適應手機屏幕。
結語
初次在簡書寫文章，語言組織混亂，有錯誤的地方還望原諒并指出。另外，對于物理像素和邏輯像素，本人還存在著疑問，希望能在下篇文章中得出答案。
