這裡面有個meta標簽很重要，viewport。

1.什麼Viewport？

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

Viewport的meta標簽

注意在內容之前在HEAD標簽內有一個viewport的meta標簽設定了浏覽器怎樣展示頁 面的縮放等級和范圍。如果沒有設置的話，許多移動設備的浏覽器會使用一個“虛 擬的”頁面寬度，大約是900PX寬，使得桌面的網站工作的也很好，但是這樣屏幕看 起來是縮小的而且太寬了。通過設置viewport屬性為content="width=device- width, initial-scale=1，會使寬度會被設定為設備的屏幕寬度。

---

這個設置沒有沒有禁用用戶縮放頁面的權限，使得可訪問性非常好。但是在iOS設備 上有一個小問題，就是旋轉屏幕的時候，這個viewport的設定沒有設置寬度，在將 來的版本我們希望能修正。如果有需求的話，你可以設定viewport 的其他的屬性來 禁用縮放。

2.一般的寫法一個常用的針對移動網頁優化過的頁面的viewport meta標簽大致如下：

width：控制viewport的大小，可以指定的一個值，如果600，或者特殊的值，如device - width為設備的寬度（單位為縮放為100 % 時的CSS的像素）。

height：和width相對應，指定高度。

initial - scale：初始縮放比例，也即是當頁面第一次load的時候縮放比例。

maximum - scale：允許用戶縮放到的最大比例。

minimum - scale：允許用戶縮放到的最小比例。

user - scalable：用戶是否可以手動縮放