移動端Web系列3 -- viewport

寫在前面

• 這裏就跳過了文檔申明知識的介紹了，這麼好的機會還不用html5的，你還在等什麼？
• 概念瞭解： device pixels and css pixels
  
  
  • css像素： 瀏覽器使用的抽象單位，主要用來在網頁上繪製內容
  • 設備像素： 顯示屏幕的最小物理單位，每一個 dp 包含本身的顏色、亮度
  • css 1px != device 1px
• 概念瞭解： screen size and window size

viewport

由來

因爲手機屏幕相對桌面顯示器要小不少，傳統網頁上的設計在手機上的體驗會很糟糕，閱讀性很是差。
爲了讓手機也能得到良好的網頁瀏覽體驗，Apple 在移動版 Safari 中定義了 viewport meta 標籤(若是沒記錯最先提出的話)，用於建立一個虛擬窗口（layout viewport），這個虛擬窗口的分辨率接近於桌面顯示器，Apple 將其定義爲980px。而後將虛擬窗口映射到移動設備的屏幕上，按比例縮放並從新渲染網頁。

劃分

• 虛擬窗口（layout viewport）
  移動瀏覽器默認狀況下把 viewport 設置爲一個比較寬的值（防止太窄而在可視區域中顯示錯亂）。該默認的 viewport 稱爲 layout viewport。
  寬度可經過 Js 獲取(基本全部設備都支持)

  document.documentElement.clientWidth
  document.documentElement.clientHeight

• 視覺窗口（visual viewport）
  瀏覽器可視區域大小。可理解爲手機物理屏幕。

  寬度可經過 Js 獲取(不支持Android2, Opera Mini, UC8)

  window.innerWidth
  window.innerHeight

• ideal viewport
  由Peter-Paul Koch提出的一種概念，一個完美適配移動設備的 viewport。理想狀態是不須要用戶縮放和橫向滾動條就能正常查看，顯示的文字大小合適，不區分分辨率，屏幕密度等。

• meta viewport
  移動端默認使用的是 layout viewport ，而咱們想要達到相似 ideal viewport 的效果的話，能夠經過 meta 標籤來對 viewport 進行控制。

  移動開發中必出場的定義：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

  用來實現 ideal viewport 的效果。

  meta viewport 標籤屬性說明

  width: 320 // 設置 layout viewport 的寬度，device-width 爲設備寬度
  height: 800 // 和 width 對應，通常不多用
  initial-scale: 1 // 設置頁面初始縮放值，
  minimum-scale: 1 // 容許用戶的最小縮放值
  maximum-scale: 1 // 容許用戶的最大縮放值
  user-scalable: yes/no // 是否允能夠手動縮放

關於 meta viewport 的各屬性還有不少有趣的知識點。視頻中能夠揭曉~

Tips

• device-width 查詢的是設備像素
• 不一樣瀏覽器的默認 layout viewport 略有不一樣
• 事件座標在移動端各類不兼容
• initial-scale 和 device-width 疊加才能兼容目前的移動設備viewport 匹配
• 縮放值越大，當前 viewport 的寬度就越小，可是，並非全部設備都能支持 initial-scale=2 的
• 當前縮放值 = ideal viewport 寬度 / visual viewport 寬度
• 當設置寬度值衝突時，瀏覽器會選擇最大值

參考文獻

• Mozilla viewport
• Google Developers
• ppk - viewport1
• ppk - viewport2
• ppk - viewport3
• ppk 大神的視頻，建議看看。