229
移動端的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設置固定數值（我這充話費送的破手機的默認瀏覽器就不支持）所以最好別用那個。
最後更新：2017-04-03 12:53:57