viewport 是使用者網頁的可視區域。
viewport 翻譯為中文可以叫做"視區"。
手機瀏覽器是把頁面放在乙個虛擬的"視窗"（viewport）中，通常這個虛擬的"視窗"（viewport）比螢幕寬，這樣就不用把每個網頁擠到很小的視窗中（這樣會破壞沒有針對手機瀏覽器優化的網頁的布局），使用者可以通過平移和縮放來看網頁的不同部分。
乙個常用的針對移動網頁優化過的頁面的 viewport meta 標籤大致如下：
"viewport" content=
"width=device-width, initial-scale=1.0"
>
height：和 width 相對應，指定高度。
initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。
maximum-scale：允許使用者縮放到的最大比例。
minimum-scale：允許使用者縮放到的最小比例。
user-scalable：使用者是否可以手動縮放。
以下例項演示了使用viewport和沒使用viewport在移動端上的效果：
web前端 響應式布局
隨著移動裝置的流行，網頁設計必須要考慮到移動端的設計。同乙個 為了相容pc端和移動端顯示，就需要進行響應式開發。利用 查詢，讓同乙個 相容不同的終端 pc端 移動端 呈現不同的頁面布局。css3 media查詢 用於查詢裝置是否符合某一特定條件，這些特定條件包括螢幕尺寸 是否可觸控 螢幕精度 橫屏豎...
響應式web設計
initial scale 1.0 script 不使用width px 只使用百分比寬度width xx 或者width auto 字型也不能使用絕對大小 px 而只能使用相對大小 em 如 font normal 100 helvetica,arial,sans serif 字型大小是頁面預設大...
響應式web設計
響應式網頁設計是時下網頁設計領域最熱門的話題之一，該概念由著名網頁設計師 ethan marcotte 在2010年5月份提出，其目標是要讓設計的 能夠響應使用者的行為，根據不同終端裝置自動調整尺寸。簡而言之，就是乙個 能夠相容多個終端 而不是為每個終端做乙個特定的版本。那麼，怎麼實現響應式設計呢？...