視覺視口和佈局視口之間的區別？

Question

像iPhone/iPad這樣的移動設備，可視化視口和佈局視口之間有什麼區別？

我已經經歷了很多網上資源，但我對此尚不清楚。

Answer 1

可視視口是當前顯示在屏幕上的頁面的一部分。

佈局視口可能比視覺視口寬得多，並且包含顯示並且不出現在屏幕上的元素。

想象一下，佈局視口是一個不會改變大小或形狀的大圖像。現在想象你有一個更小的框架，通過它你看大圖像。小框架被不透明材料包圍，遮擋了除大部分大圖像以外的所有視圖。您可以通過框架看到的大圖像部分是可視視口。您可以在保持框架（縮小）的同時退出大圖像以一次查看整個圖像，或者可以靠近（放大）以僅查看一部分。您也可以更改框架的方向，但大圖像（佈局視口）的大小和形狀不會更改。

對於這個問題的一個偉大的治療，請參閱：http://www.quirksmode.org/mobile/viewports2.html

Answer 2

兩個很好的解釋中找到here。

總結：

視覺視

視覺視口的，因此目前在屏幕上顯示的頁面的一部分。用戶可以滾動以更改他看到的頁面部分，或者縮放以更改視覺視口的大小。

佈局視

然而，CSS佈局，特別是按百分比的寬度，是相對於佈局視口，其比視覺視口要寬計算的。

因此，元素最初會佔用佈局視口的寬度，並且您的CSS會被解釋爲屏幕比手機屏幕寬得多。這可以確保您的網站佈局的行爲與在桌面瀏覽器上的佈局相同。

佈局視口有多寬？每個瀏覽器都不相同。 Safari iPhone使用980像素，Opera 850像素，Android WebKit 800像素和IE 974像素。

簡而言之，佈局視口一般是視口的寬度，當屏幕放大到最大時。