viewport及相關屬性之間關系的解析（圖）

話不多說，上正題

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

1. 布局視口（layout viewport）

2. 視覺視口（visual viewport）

3. 理想適口（ideal viewport）

對應相關的屬性有5個

1. width：設置布局視口的寬度為特定的值

2. initial-scale：設置頁面的初始縮放程度和布局視口的寬度。

3. minimum-scale：設置最小縮放程度

4. maximum-scale：設置最大縮放程度

5. user-scalable：是否阻止用戶進行縮放

為啥沒有理想窗口：因為理想窗口是瀏覽器自己定義的，不同瀏覽器設備的理想窗口不一致是很正常的。

布局視口

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

下圖是在沒有加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試了，旋轉設備后理想適口自動換了）

以下兩種方式都能將布局窗口的寬度設置成理想窗口的寬度，但是第一種方式在早期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，截圖是我放大到最大的時候，對應視覺窗口的寬度是32px(2個粉紅的寬度)，即 理想視口寬度/10倍的寬度

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com