深入理解 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,且不允許用戶對頁面進行縮放。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章