上一篇25學(xué)堂跟大家分享了web APP頁面適配方案：淘寶H5與網(wǎng)易H5頁面對(duì)比和H5頁面適配所有iPhone和安卓機(jī)型的六個(gè)技巧

很多小伙伴對(duì)viewport的理解不是很透徹，于是這一篇重點(diǎn)聊聊viewport（視圖）的知識(shí)點(diǎn)。以幫助大家更加容易理解移動(dòng)端H5頁面的適配方案。

解讀移動(dòng)H5適配最重要的html標(biāo)簽：meta視口標(biāo)簽

meta視口標(biāo)簽是是設(shè)置理想視口的重要元素，主要用于將布局視口的尺寸和理想視口的尺寸相匹配。meta視口標(biāo)簽存在5個(gè)指令：

width：設(shè)置布局視口的寬度，一般設(shè)為device-width。

initial-scale：初始縮放比例。1即100%，2即200%，以此類推

maximum=scale：最大縮放比例。

minimum-scale：最小縮放比例。

user-scalable：是否靜止用戶進(jìn)行縮放，默認(rèn)為no。

 

需要注意的是，縮放是根據(jù)理想視口進(jìn)行計(jì)算的。縮放程度與視覺視口的寬度是逆相關(guān)的。也就是說，當(dāng)你將屏幕放到到2倍時(shí)，視覺視口為理想視口的一半，此時(shí)每單位的CSS像素等于2個(gè)設(shè)備像素。縮小時(shí)則相反。

1、布局視口（layout viewport）

可以看作是html元素的上一級(jí)容器即頂級(jí)容器，默認(rèn)情況或者將html元素的width屬性設(shè)為100%時(shí)，會(huì)占滿這個(gè)頂級(jí)容器，此時(shí)用

document.documentElement.clientWidth?

獲取到html元素的布局寬度也就是布局視口的寬度，使用媒體查詢時(shí) max-width 和 min-width 的值指的也是布局視口的寬

2、布局視口的寬度和高度單位是像素px，

這個(gè)單位是CSS和JS中使用的抽象單位，為了便于區(qū)分稱作CSS像素。布局視口的寬度有一個(gè)默認(rèn)值，一般在 768px ~ 1024px 之間，最常見的寬度是 980px，在這個(gè)默認(rèn)值下進(jìn)行布局得到的頁面比較接近PC端布局的效果。

3、可視視口（visual viewport）

是指用戶可見頁面區(qū)域，其寬度值為橫向可見CSS像素?cái)?shù)，從另一個(gè)角度理解，可視視口的寬度決定了將屏幕橫向分為多少份，每份對(duì)應(yīng)一個(gè)CSS像素，使用window.innerWidth ??可以獲取到可視視口的寬度

4、理想視口（ideal viewport）

是一個(gè)比較適合頁面布局使用的視口尺寸，作為計(jì)算布局視口和可視視口尺寸時(shí)的一個(gè)基準(zhǔn)值，下面代碼中 device-width 的值就是理想視口的寬度

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

使用screen.width，也可以獲取到理想視口的寬度

5、三個(gè)視口中，只有理想視口的尺寸是不能改變的

由設(shè)備和瀏覽器決定，與設(shè)備的物理像素?cái)?shù)存在著比例關(guān)系，這個(gè)比例就是設(shè)備像素比（device pixel ratio， dpr），即有?設(shè)備像素比 = 物理像素?cái)?shù) / 理想視口尺寸，舉例iphone5屏幕橫向有640個(gè)物理像素，其理想視口寬為320，則 dpr=2，可以使用window.devicePixelRatio獲得dpr，但在安卓系統(tǒng)下這個(gè)值可能不符合預(yù)期。

6、可視視口的尺寸收到縮放比例的影響

因此用戶手動(dòng)縮放和在 meta 標(biāo)簽中設(shè)置 initial-scale 的值都會(huì)改變可視視口的尺寸，可視視口的尺寸越小即顯示的CSS像素?cái)?shù)越少，則單位CSS像素對(duì)應(yīng)的可使區(qū)域越大，對(duì)應(yīng)的縮放比也就越大。

縮放比例是相對(duì)于理想視口而言的，即有?縮放比例 = 理想視口尺寸 / 可視視口尺寸。

對(duì)iphone5，設(shè)置<meta name="viewport" content="initial-scale=0.5">

則其可視視口尺寸為640個(gè)CSS像素

縮放比例也有默認(rèn)的值，沒有設(shè)置 initial-scale 時(shí)，瀏覽器會(huì)取適當(dāng)?shù)目s放比例使 布局視口正好鋪滿屏幕即有?布局視口尺寸 = 可視視口尺寸

7、布局視口的寬度受到 meta 標(biāo)簽中的 width 和 initial-scale 的影響

僅設(shè)置 width 的值時(shí)，這個(gè)值就是布局視口的寬度，width的值可以為正整數(shù)或特殊值 device-width

<meta name="viewport" content="width=400">

此時(shí)由于沒有禁用縮放，一般可以通過雙擊屏幕對(duì)頁面進(jìn)行縮放，但手動(dòng)縮放不會(huì)影響布局適口的尺寸，只會(huì)影響到可視視口的尺寸，而且可能導(dǎo)致布局視口小于可視視口

設(shè)置 initial-scale 的值時(shí)，布局視口的尺寸與可視視口的計(jì)算方式相同，但不受手動(dòng)縮放的影響，同時(shí)設(shè)置 width 和 intial-scale 的值時(shí)，布局視口的寬取上述兩個(gè)值中較大的一個(gè)。

8、布局視口寬 = 可視視口寬時(shí)

html 元素正好橫向鋪滿窗口（但其后代元素若有橫向 overflow 的情況，仍然會(huì)出現(xiàn)滾動(dòng)條），布局視口寬 > 可視視口寬時(shí)，出現(xiàn)橫向滾動(dòng)條。

9、彈性布局的開發(fā)原則

web app是一種典型的彈性布局：關(guān)鍵元素高寬和位置都不變，只有容器元素在做伸縮變換。對(duì)于這類app，記住一個(gè)開發(fā)原則就好：文字流式，控件彈性，圖片等比縮放。以圖描述：

這個(gè)規(guī)則是一套基本的適配規(guī)則，對(duì)于這種簡(jiǎn)單app來說已經(jīng)足夠，同時(shí)它也是后面要說的rem布局的基礎(chǔ)。

10、移動(dòng)端背景圖片 適配的三種方法

（1）、響應(yīng)式布局

簡(jiǎn)而言之，就是頁面元素的位置隨著屏幕尺寸的變化而變化，通常會(huì)用百分比來定位，而在設(shè)計(jì)上需要預(yù)留一些可被“壓縮”的空間。

（2）、Cover布局

就跟background-size的cover屬性一樣，保持頁面的寬高比，取寬或高之中的較小者占滿屏幕，超出的內(nèi)容會(huì)被隱藏。此布局適用于主要內(nèi)容集中在中部，邊沿?zé)o重要內(nèi)容的設(shè)計(jì)。

?（3）、Contain布局

同樣，也跟background-size的contain屬性那樣，保持頁面的寬高比，取寬或高之中的較大者占滿屏幕，不足的部分會(huì)用背景填充。個(gè)人比較推薦用這種方式，但在設(shè)計(jì)上需要背景為單色，或者是可平鋪的背景。

由上述規(guī)則可以得到一些有用的結(jié)論：

1、將 meta 標(biāo)簽中的 width 設(shè)為 device-width 同時(shí)禁用手動(dòng)縮放可以使?布局視口尺寸 = 可視視口尺寸 = 理想視口尺寸，此時(shí)?設(shè)備像素比 = 物理像素?cái)?shù) / 理想視口尺寸 = 物理像素?cái)?shù) / 布局視口尺寸，對(duì)iphone5，一個(gè)CSS像素對(duì)應(yīng)4個(gè)物理像素

2、為 initial-scale 設(shè)置任意合法的值同時(shí)禁用手動(dòng)縮放就可以使布局視口尺寸 = 可視視口尺寸

3、將 initial-scale 設(shè)置為 1 也可以使?布局視口尺寸 = 可視視口尺寸 = 理想視口尺寸