viewport的作用是告訴瀏覽器，目前裝置有多寬(或多高)，以便在縮放時有個基準。尤其當設定頁面寬度需自動調整時，如寬度100%或螢幕由垂直轉為水平，viewport大小是一個根據。
<h2 style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-top:1em;margin-right:0px;margin-bottom:0px;margin-left:0px;font-family:Georgia, Verdana, Arial, serif;font-size:1.4em;letter-spacing:1px;font-weight:normal;">《用法》</h2>
<span style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;color:#0000ff;"><</span><span style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;color:#800000;">meta</span> <span style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;color:#ff0000;">name</span><span style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;color:#0000ff;">="viewport"</span> <span style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;color:#ff0000;">content</span><span style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;color:#0000ff;">="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"</span><span style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;color:#0000ff;">></span>
(這個例子中的maximum-scale也設為1，其實就是不讓使用者縮放，以維持頁面的設計，行動裝置專用的網頁常有必要這樣做。)
<h2 style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-top:1em;margin-right:0px;margin-bottom:0px;margin-left:0px;font-family:Georgia, Verdana, Arial, serif;font-size:1.4em;letter-spacing:1px;font-weight:normal;">《屬性和值》</h2>
根據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可以配合行動版專用網頁的設定，剛剛好填滿畫面，不過桌機版網頁超出畫面是必然的。
<h2 style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-top:1em;margin-right:0px;margin-bottom:0px;margin-left:0px;font-family:Georgia, Verdana, Arial, serif;font-size:1.4em;letter-spacing:1px;font-weight:normal;">《備註》</h2>
螢幕解析度不一定等於device-width，
Nexus One 是螢幕解析度(800)不等於device-width(320)的典型例子，
iPhone 4 亦同 – 螢幕解析度(960)，但device-width回報為(320)。
新出的手機傾向採用高畫素的面板，如果照實體螢幕解析度作為device-width，有可能進入大部分網站時都看到縮小的畫面，這是使用方便上的一個考量。
<h2 style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-top:1em;margin-right:0px;margin-bottom:0px;margin-left:0px;font-family:Georgia, Verdana, Arial, serif;font-size:1.4em;letter-spacing:1px;font-weight:normal;">《資料來源》</h2>
- W3C文件 http://dev.w3.org/csswg/css-device-adapt/
- device-width的解說
http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html - Pou’s IT Life
http://www.dotblogs.com.tw/pou/archive/2010/09/26/17890.aspx