參考網址：www.flycan.com
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
隨著近年來智慧型手機的普及化，使用智慧型手機上網的人口數日益增加，家家戶戶對於手機網頁 Mobile Web 的設計需求也就越來越多了，在開始設計手機網頁時，第一件事情就是要設定 viewport 調整手機瀏覽器的螢幕解析度。
Viewport 屬性說明：
width=device-width
有些教學文章上面會寫成 width=320 就是將手機瀏覽器的螢幕解析度設定為 320px，這個大小在 iPhone 就是 他的 viewport 預設值，所以在 iPhone 上面看起來就是剛剛好的，但是，這 2 年來手機螢幕越做越大，有些手機螢幕做到 4 吋以上，甚至有些還做到 5 吋以上，手機螢幕變大了，他們的 viewport 預設值也就會大於 320px ，由於手機的品牌太多了，我們的網頁沒辦法為每一台手機都設定成不同的 viewport ，因此，我們就只要設定為 width=device-width 就可以自動符合所有不同手機螢幕他們自己的預設最佳解析度。
initial-scale=1
設定手機螢幕畫面的初始縮放比例為 100%。
| width | 設定畫面寬度 |
| height | 設定畫面高度 |
| initial-scale | 設定畫面的初始縮放比例 |
| minimum-scale | 設定畫面的最小縮放比例 |
| maximum-scale | 設定畫面的最大縮放比例 |
| user-scalable | 設定是否允許使用者改變縮放比例 |
通常，在大部份的情況，只要設定 width=device-width, initial-scale=1.0 這兩個就可以了，其他幾個屬性比較少會被用到。