深刻理解viewport及相關屬性的關係

標題想了半天，最後潦草的取了【深刻理解*】，可能有些童鞋們看完以爲沒有深刻理解，那。。。

話很少說，上正題，本文主要是加深對viewport3個視口的瞭解，以及相關的屬性做用於哪些視口上，但願對你們有幫助吧

歸納總結：佈局視口最有用，用到的幾乎都是這個。理想視口是瀏覽器定義的最佳的佈局視口的尺寸，縮放的最大最小狀況是基於這個計算的。視覺視口受縮放影響，通常狀況不大用。

大概瞭解viewport童鞋們應該知道，viewport有3種

1. 佈局視口（layout viewport）
2. 視覺視口（visual viewport）
3. 理想視口（ideal viewport）

對應相關的屬性有5個

1. width：設置佈局視口的寬度爲特定的值
2. initial-scale：設置頁面的初始縮放程度和佈局視口的寬度。
3. minimum-scale：設置最小縮放程度(範圍0.1 - 10)
4. maximum-scale：設置最大縮放程度(範圍0.1 - 10)
5. user-scalable：是否阻止用戶進行縮放

爲啥沒有理想窗口：由於理想窗口是瀏覽器本身定義的，不一樣瀏覽器設備的理想窗口不一致是很正常的。

佈局視口

移動設備的一般的寬度在240到640像素之間，可是不少桌面的網站的寬度都在800像素以上。一個35%的sidbar在桌面看起來很正常，在手機上則會很是的窄。爲了解決這個問題。不少移動端瀏覽器的廠商都將視口的寬度設計的比屏幕尺寸寬不少，從768到1024不等，但常見的寬度是980px。

能夠用document.documentElement.clientWidth/clientHeight取得對應的值

下圖是在沒有加viewport meta的時候，對應移動端的寬度(iphone 8p上也是980)

在瀏覽器碰到一個沒有作移動端優化的網站時候，瀏覽器會盡量縮小網站讓用戶看到網站的全貌。

viewport meta裏面的width是用來設置layout viewport的，除了常見的device-width，還能設置成固定數值，好比600。

CSS佈局會根據佈局視口計算，並被它約束。

以下圖，粉色條的寬度是根據600 * 30% = 180

initial-scale也是用來設置layout viewport的，它和minimum-scale和 maximum-scale不同。

佈局視口寬度 = 理想視口寬度 / initial-scale， 因此下圖中佈局視口的寬度等於106

視覺視口

視覺視口是指用戶正在看到的網站的區域。用戶能夠經過縮放來操做視覺視口，同時不會影響佈局窗口

通常狀況下，視覺視口對開發人員並不重要，可是若是實在要用，能夠用window.innerWidth/Height能夠獲取當前視覺適口的值（安卓webkit2和代理瀏覽器會有問題）

理想視口

在講佈局視口的時候，提到過佈局視口的默認寬度通常是980左右，以適應桌面網頁的寬度，但這在移動端並非一個理想的寬度，因此瀏覽器廠商都引入了理想視口的概念。

理想視口對設備來講是最理想的佈局視口尺寸，擁有最理想的瀏覽和閱讀的寬度。

理想視口是瀏覽器定義的，不是設備或操做系統的工做。因此同一個設備上的不一樣瀏覽器可能具備不一樣的理想適口寬度。

理想視口寬度會隨着設備改變轉向 (早期的safari例外，能夠用initial-scale=1解決，我剛剛用iphone 8p試了，旋轉設備後理想適口自動換了）

能夠用screen.width/height 返回理想視口的尺寸。（兼容性很差。。。）

如下兩種方式都能將佈局窗口的寬度設置成理想窗口的寬度，可是第一種方式在早期safari的設備旋轉後不會變化，第二個在IE 10下寬度不正確，因此第三種纔是完美的mata視口

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

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

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

全部的縮放都是基於理想視口寬度的 maximum-scale和minimum-scale都是根據理想視口定的，和佈局視口的寬度並沒有關係。

下圖中，理想視口寬度是320px，佈局視口設置成160px，截圖是我放大到最大的時候（10倍），對應視覺窗口的寬度是32px(2個粉紅的寬度)，即 理想視口寬度/10倍的寬度，而不是佈局視口/10的寬度（16px）

參考：
書本《移動web手冊》
連接：https://www.quirksmode.org/mo...