1. 設備像素和css像素
- 設備像素，又叫物理像素（physical pixel），給出您正在使用的任何設備的形式分辨率，可通過screen.width/height獲取.
- css像素，又叫設備獨立像素（device-indenpendent pixel），此為邏輯像素，計算機設備中的一個點
-
注意：設備像素和css像素的關係（縮小還是放大針對的是css像素）：
- 100％縮放：設備像素和css像素重疊
- 縮小：CSS像素開始縮小，意味着一個設備像素現在與幾個CSS像素重疊。
- 放大：CSS像素開始增長，意味着一個CSS像素與幾個設備像素重疊。
2. pc端的尺寸
| 屏幕尺寸 | 窗口尺寸 | 滾動偏移 | 視口(佈局視口) | html元素 | 事件座標 | |
|---|---|---|---|---|---|---|
| 概念 | 指顯示器的屏幕尺寸，和顯示器有關，和瀏覽器無關 | 瀏覽器窗口的尺寸，包含滾動條 | 頁面的滾動偏移量 | 網站的最上方包含的塊，用來約束<html>元素（不包含滾動條） | 發生鼠標事件時，將公開不少於五個屬性對，以提供有關事件確切位置的信息 | |
| 獲取方式 | screen.width/height | window.innerWidth/height | window.pageX/YOffset | document.documentElement.clientWidth | document.documentElement.offsetWidth | |
| 像素單位 | 設備像素 | css像素 | css像素 | css像素 | css像素 | |
| 其他説明 | 窗口的內部寬度以CSS像素為單位，計算時需要知道將多少css像素包含在瀏覽器窗口中。因此，如果用户放大，則窗口中的可用空間會減少 | 視口不受CSS影響。它只是在桌面上具有瀏覽器窗口的寬度和高度。在移動設備上，它要複雜得多。 | 1. pageX/Y給出相對於html的座標（css像素） 2. clientX/Y給出相對於視口的座標（css像素） 3. screenX/Y給出相對於屏幕的座標（設備像素） |
3. 移動設備中的尺寸
| 屏幕尺寸 | 視覺視口 | 佈局視口 | 滾動偏移 | html元素 | 事件座標 | |
|---|---|---|---|---|---|---|
| 概念 | 移動設備的屏幕尺寸 | 在屏幕上顯示的頁面的一部分。用户可以滾動以更改其看到的頁面部分，或縮放以更改可視視口的大小。 | css佈局所依賴的視口，比視覺視口要寬，並且不同瀏覽器的佈局視口不同。 | 視覺視口相對於佈局視口的位置 | 同web端 | |
| 獲取方式 | screen.width/height | document.documentElement.clientWidth | window.innerWidth/Height | window.pageX/YOffset | document.documentElement.offsetWidth/Height | |
| 像素單位 | 設備像素 | css像素 | css像素 | css像素 | css像素 | |
| 其他説明 | 當用户放大或縮小時，視覺視口的尺寸會發生變化，因為屏幕上會容納更多或更少的CSS像素 | 1. pageX/Y給出相對於html的座標 2.clientX/Y相對於可視視口 3.screenX/Y是相對於屏幕 |
- 視覺視口
- 佈局視口
4. 理想視口
4.1 meta標籤
meta標籤包含有關瀏覽器和視口縮放的指令，我們可以通過它來設置佈局視口的寬度。
寫法如下：
<meta name =“ viewport” content =“名稱=值，名稱=值”>
其中：
- width：設置佈局視口的寬度，值可以為一個正整數或'device-width'
- initial-scale：設置頁面的初始縮放比例和佈局視口的寬度。
- minimum-scale：設置最小縮放級別
- maximum-scale：設置最大縮放級別
- user-scalable：是否允許用户縮放
4.2 理想視口的概念
在移動端，佈局視口往往比視覺視口大很多，給用户不好的體驗。所以蘋果引入了理想視口的概念。
為瀏覽器定義的可完美適配移動端的理想viewport,即將佈局視口的寬度設置為移動設備的屏幕寬度。
- 所謂完美適配需要滿足以下兩點：
- 不需要用户縮放和橫向滾動條就能正常的查看網站的所有內容。
- 顯示的文字的大小在任何分辨率的屏幕下都是合適的
- 設置方式：
- width=device-width（device-width本身就是設備的屏幕寬度）
- 缺點：在iphone和ipad上，無論是豎屏還是橫屏，寬度都是豎屏時ideal viewport的寬度。
- initial-scale=1：該值是相對於理想視口來縮放的，值為1表明理想視口的縮放比例是100%，即就是理想視口的本身寬度。
- 缺點：IE 無論是豎屏還是橫屏都把寬度設為豎屏時ideal viewport的寬度。
- 同時設置以上兩個屬性：分別規避了各自的缺點
4.2.1 詳解initial-scale
1. 設置此屬性實際上發生了兩件事兒：
- 它將頁面的初始縮放係數設置為相對於理想視口計算得出的定義值。因此，它會生成可視的視口寬度。
- 它將佈局視口寬度設置為剛計算出的可視視口寬度。
2. 視覺視口和理想視口的關係如下：
- 可視視口寬度=理想視口寬度/縮放係數
- 縮放係數=理想視口寬度/可視視口寬度
(注意：當縮放係數變大時，那麼css像素會變大，導致視覺視口容納更少的css像素，於是視覺視口變小)
4.2.2指令衝突
當同時設置width=device-width和initial-scale時，就會產生衝突，因為二者同時對佈局視口的寬度進行設置。
例如，進行如下設置時：
<meta name =“ viewport” content =“ initial-scale = 1，width = 400”>
- initial-scale=1 告訴它將佈局視口寬度設置為縱向320px和橫向480px。
- width=400 告訴它在縱向和橫向中都將佈局視口寬度設置為400px。
結論：瀏覽器通過遵循縱向或橫向的最大寬度來解決該問題。在我們的示例中，縱向佈局視口的寬度變為400px（較大的為320和400），而橫向佈局視口的寬度為480px（較大的為480和400）。
更多信息：github
參考如下：
viewport的深入理解
ppk關於視口的介紹
