移動端的meta viewport

什麼是viewport

手機瀏覽器是把頁面放在一個虛擬的“視窗”（viewport）中，通常這個虛擬的“視窗”（viewport）比螢幕寬，這樣就不用把每個網頁擠到很小的視窗中（這樣會破壞沒有針對手機瀏覽器優化的網頁的佈局），使用者可以通過平移和縮放來看網頁的不同部分。移動版的 Safari 瀏覽器最新引進了 viewport 這個 meta tag，讓網頁開發者來控制 viewport 的大小和縮放，其他手機瀏覽器也基本支援。

移動viewport的特點

移動端和桌面端不一樣，它有2個視口(viewport)：可見視口(visual viewport)和 佈局視口(layout viewport).

關於2者的區別，stack overflow有這樣的解釋：

想象下現在有一張不會改變尺寸和形狀的大的圖片，你手裡拿著一箇中空的框子(想象下砸空你手機的螢幕)，透過它你可以看到這張圖片，並且這個框框的周圍是用不透明的材料做成的，你只能通過中間的洞去看這張圖片。你可以移動這個框子，靠近自己的眼睛的話可以看到更多的圖片區域，也可以使它遠離自己的眼睛，從而只看到這張圖片的一部分小區域。

那張不可改變形狀和尺寸的圖片=佈局視口(layout viewport)

你手中的中空的框子=可見視口(visual viewport)

也就是說我們在移動端用手指來縮放螢幕，其實改變的是可見視口(visual viewport)的尺寸，而佈局視口(layout viewport)總是保持不變。

viewport設定

<meta name="viewport" content="引數名稱=引數值（多個引數用逗號隔開）" />

maximum-scale：使用者可以縮放的最大值

minimum-scale：使用者可以縮放的最小值

initial-scale：viewport的預設縮放大小

width：固定viewport的寬度

height：固定viewport的高度

user-scalable：是否允許使用者縮放

前三個引數都是縮放相關的，它們的值是viewport的縮放大小，他們僅僅改變縮放大小，並不是改變viewport的實際大小。比如要讓網頁載入時候顯示兩倍大小就可以加上這個

<meta name="viewport" content="initial-scale=2" />

之後就是width和height，修改這倆東西就和我們在PC上訪問網頁時候用滑鼠拖動瀏覽器來改變大小一樣。或者說是瀏覽器（頁面區域）在螢幕上的預設大小。可以是具體的數值，也可以用“device-width”和“device-height”把它設定成瀏覽器螢幕的大小。比如要把頁面寬度固定到瀏覽器的螢幕上，防止出現橫向滾動條就可以使用

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

最後一個是指定是否允許使用者自己縮放，也就是使用者通過兩個手指觸屏來縮放的方式。預設都是允許的值為1，如果要禁止可以把它的值設定為0。就像下面這樣

<meta name="viewport" content="user-scalable=0" />

設定了這個屬性以後兩個手指在螢幕上把它摸到高潮它也不會縮放。上面這些屬性只要設定就可以讓網頁在Mobile裝置下好好顯示，我一般會禁止橫向滾動條和使用者縮放，就像下面這樣

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

最後一個是指定是否允許使用者自己縮放，也就是使用者通過兩個手指觸屏來縮放的方式。預設都是允許的值為1，如果要禁止可以把它的值設定為0。就像下面這樣

<meta name="viewport" content="width=device-width,user-scalable=0" />

只要把他們用逗號隔開就可以了，不過有些瀏覽器不支援width和height設定固定數值（我這充話費送的破手機的預設瀏覽器就不支援）所以最好別用那個。