深刻理解 viewport

viewport是<meta>標籤的一個屬性，它提供有關視口初始大小的提示，僅供移動設備使用。也就是說只有清楚viewport的使用，才能更好的針對不一樣分辨率的設備進行移動端開發。

什麼是 viewport？

viewport

英 [ˈvju:pɔ:t] 美 [ˈvjupɔrt]

n.視口；

相信中英互譯已經很好理解了，是的，viewport簡單來講就是設備顯示網頁的區域。

與pc端相比。移動設備的視口每每偏小，且寬小於高。爲確保那些不是爲移動端設備設計的網站能夠正常顯示，佈局不至於亂掉，移動端嘗試用虛擬的視口渲染頁面而後縮小以適應設備視口大小。

不得不說，這種虛擬視口是一種讓未作移動端優化的網站在移動設備上自動適配的有效方法。

可問題來了，對於那些用媒體查詢作了優化的頁面，這種機制並不是友好，浪費了響應式設計。

viewport meta 標籤應運而生。

蘋果在 safari IOS 中第一次引入了 viewport meta 標籤，能夠讓開發人員控制視口的大小和比例。

一個典型的針對移動端優化的頁面meta標籤實例：

<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

• init-scale：設置頁面的初始縮放程度
• maximum-scale：設置了頁面最大縮放程度
• minimum-scale：設置了頁面最小縮放程度
• user-scalable：是否容許用戶對頁面進行縮放操做

故上述實例含義爲：瀏覽器視圖爲設備寬度，頁面初始縮放比例及最大縮放比例最小縮放比例都是1，且不容許用戶對頁面進行縮放。