Viewport的設定
《基礎》
viewport的作用是告訴瀏覽器，目前裝置有多寬(或多高)，以便在縮放時有個基準。尤其當設定頁面寬度需自動調整時，如寬度100%或螢幕由垂直轉為水平，viewport大小是一個根據。
《用法》
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
(這個例子中的maximum-scale也設為1，其實就是不讓使用者縮放，以維持頁面的設計，行動裝置專用的網頁常有必要這樣做。)
《屬性和值》
根據W3C草案，在meta tag中viewport有以下屬性可設定
- width:[數字] 或 device-width
- height:[數字] 或 device-height
- initial-scale:最小0.25，最大5
- minimum-scale:最小0.25，最大5
- maximum-scale:最小0.25，最大5
- user-scalable:1 或 0 (yes 或 no)
雖然是W3C文件，但還在草案(Editor’s Draft)階段，尚未標準化，iOS上的Safari最先實作這些屬性，所以比較完整，表現也比較穩定；其他瀏覽器不見得能解譯，但新版的Opera, Android, Fennec(Mobile Firefox)應該是可以實現其中幾項屬性的。但Opera Moblie 9.5中minimum-scale/maximum-scale、user-scalable的功能是不作用，因為Opera當時認為自家的Zoom功能是必要的。
width通常設為device-width，用意是適應各家裝置的大小，這樣寫CSS時就能放心的把版面寬度設為100%(雖然還有一個box model的問題，容後再述)。
user-scalable的實際行為就等於zoom，zoom=1可以配合行動版專用網頁的設定，剛剛好填滿畫面，不過桌機版網頁超出畫面是必然的。
《備註》
螢幕解析度不一定等於device-width，
Nexus One 是螢幕解析度(800)不等於device-width(320)的典型例子，
iPhone 4 亦同 – 螢幕解析度(960)，但device-width回報為(320)。
新出的手機傾向採用高畫素的面板，如果照實體螢幕解析度作為device-width，有可能進入大部分網站時都看到縮小的畫面，這是使用方便上的一個考量。
烏托比亞 