viewport及相關(guān)屬性之間關(guān)系的解析（圖）

話不多說，上正題

大概了解viewport童鞋們應(yīng)該知道，viewport有3種

1. 布局視口（layout viewport）

2. 視覺視口（visual viewport）

3. 理想適口（ideal viewport）

對應(yīng)相關(guān)的屬性有5個

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

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

3. minimum-scale：設(shè)置最小縮放程度

4. maximum-scale：設(shè)置最大縮放程度

5. user-scalable：是否阻止用戶進(jìn)行縮放

為啥沒有理想窗口：因?yàn)槔硐氪翱谑菫g覽器自己定義的，不同瀏覽器設(shè)備的理想窗口不一致是很正常的。

布局視口

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

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

在瀏覽器碰到一個沒有做移動端優(yōu)化的網(wǎng)站時候，瀏覽器會盡可能縮小網(wǎng)站讓用戶看到網(wǎng)站的全貌。

viewport meta里面的width是用來設(shè)置layout viewport的，除了常見的device-width，還能設(shè)置成固定數(shù)值，比如600。

CSS布局會根據(jù)布局視口計(jì)算，并被它約束。

如下圖，粉色條的寬度是根據(jù)600 * 30% = 180

initial-scale也是用來設(shè)置layout viewport的，它和minimum-scale和 maximum-scale不一樣。

布局視口寬度 = 理想視口寬度 / initial-scale， 所以下圖中布局視口的寬度等于106

視覺視口

視覺視口是指用戶正在看到的網(wǎng)站的區(qū)域。用戶可以通過縮放來操作視覺窗口，同時不會影響布局窗口

一般情況下，視覺窗口對開發(fā)人員并不重要，但是如果實(shí)在要用，可以用window.innerWidth/Height可以獲取當(dāng)前視覺適口的值（安卓webkit2和代理瀏覽器會有問題）

理想視口

在講布局窗口的時候，提到過布局窗口的默認(rèn)寬度一般是980左右，以適應(yīng)桌面網(wǎng)頁的寬度，但這在移動端并不是一個理想的寬度，所以瀏覽器廠商都引入了理想視口的概念。

理想視口對設(shè)備來說是最理想的布局視口尺寸，擁有最理想的瀏覽和閱讀的寬度。

理想視口是瀏覽器定義的，不是設(shè)備或操作系統(tǒng)的工作。所以同一個設(shè)備上的不同瀏覽器可能具有不同的理想適口寬度。

理想視口寬度會隨著設(shè)備改變轉(zhuǎn)向 (早期的safari例外，可以用initial-scale=1解決，我剛剛用iphone 8p試了，旋轉(zhuǎn)設(shè)備后理想適口自動換了）

以下兩種方式都能將布局窗口的寬度設(shè)置成理想窗口的寬度，但是第一種方式在早期safari的設(shè)備旋轉(zhuǎn)后不會變化，第二個在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都是根據(jù)理想窗口定的，和布局窗口的寬度并無關(guān)系。

下圖中，理想視口寬度是320px，布局視口設(shè)置成160px，截圖是我放大到最大的時候，對應(yīng)視覺窗口的寬度是32px(2個粉紅的寬度)，即 理想視口寬度/10倍的寬度

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