Mobile上的viewport及各類概念澄清貼

device Pixel & CSS Pixel

物理像素指顯示設備上的物理像素點，好比HTC G11寬是480px，這的480是用物理像素衡量的。 CSS像素的話則指咱們寫頁面時理解的那個像素單位。能夠理解爲是設備本身作了一層縮放，讓2個物理像素表明一個咱們css裏說的像素，也就是dp（設備獨立像素）的概念。行業內有個約定俗成的規範，即通常這個數值是320。 有的很高密度的手機略做了調整。

想知道設備的物理像素的話，通常去取 screen.width 就能夠。 但蘋果只會給你dp的數值，也就是320。這個時候就得用實際上的虛擬像素數（即dp個數）乘以設備像素和css像素的比值計算出來設備像素值。

screen.width * devicePiexlRation

區分好啥時候說的是設備的物理像素，啥時候說的是通常意義上的px對後面的理解很是重要！

DPI & PPI

• Dpi 指 Dots Per Inch ;
• PPI指 Pixels Per Inch。

用於衡量設備的物理像素密度；dpi主要見於Google Android開發文檔，Screen Support這一章節。這篇文章主要是講安卓開發，所以請不要被帶跑，看關鍵的幾個部分就好。

在我看來，顯示設備上的Dots和pixels其實是一回事：這裏的px指的實際上就是物理像素，而不是css文檔裏的那個相對單位px,和Dots的含義是一致的。

計算方法即是用物理像素數除以尺寸；例如iPhone4s, 尺寸爲對角線3.5英寸，分辨率960×640，那麼對角線上大約有1152個物理像素，1152除3.5可得dpi約爲329。

Lea Verou寫的dpi計算工具

dip, dppx & devicePixelRatio

按照正確的作法，如下三個值都是由瀏覽器決定，不能由於meta viewport設置改變的。（但坑爹瀏覽器老是存在的好比三星上的海豚。。）

• dip: device-independent pixel, 設備獨立像素。這一律念主要見於Android開發文檔； 安卓和WP的話使用 screen.width/devicePixelRatio 就能夠獲得dip數量； IOS上直接獲取 screen.width 就是。

• dppx : device pixel / css pixel; 這個詞其實我是在Lea的dpi計算工具裏見到的。

  (dppx) for the amount of device pixels per CSS pixel

• devicePiexlRatio :webkit瀏覽器（包括opera）支持的一個window屬性，在console裏面打window.devicePiexlRatio就能看到啦。可參見PPK寫的相關博文，devicePixelRatio及後續More about devicePixelRatio; 國內的張鑫旭也寫了很不錯的分析： 設備像素比devicePixelRatio簡單介紹

後面兩個值dppx和devicePiexlRatio其實表明的是同一個數值；至於dip，俗稱dp, 通常見於安卓開發的時候使用，我的認爲其實就等同於前端這邊使用的css概念裏的那個相對單位px。

layout viewport & visual viewport

關於兩個viewport的具體指南，請移步PPK經典大做：A tale of two viewports 和PART 2. 該文只作概要。

meta設置的取值分兩類：width, height 和 scale：

width & height

這一設置改變的是layout viewport的寬度。layout viewport的寬度即是咱們的文檔真正依託的佈局寬度。

對應 documentElement.clientWidth 。

注意！這裏所說的html的寬度是外界限制定的，css不能控制，不是說你設meta裏width爲320，把body寬度設置成640，這個layout就變成640了。實際上仍是320，而後滾動條出現啦！除非你還禁止了縮放，那連滾動條都沒了。

scale（initial\max\min）

定義visual viewport初始的縮放比例。這是能夠看到的那個小窗口，咱們關心的是這個小窗口裏能夠看到多少像素。**這個值改變不影響layout viewport！** 能夠設置scale,容許用戶縮放的話用戶本身動手也能夠改變：放大時可見的像素點減小；縮小時，可見的像素點增長；

瀏覽器在初始載入頁面的時候，先是猜測當前文檔的寬度（即html元素的寬度，可以使用documentElement.clientWidth 獲取到），若是meta設置了width, 那麼就會以此爲layout寬度，若是文檔內有元素寬度超出，且meta定義容許用戶縮放，那麼就會有滾動條啦。換言之不容許縮放還超出了，那用戶基本甭想看到超出去那塊內容了。這一寬度便是layout viewport的寬度。

而爲了能讓用戶看到更多的內容呢，瀏覽器會根據layout viewport的寬度來調整縮放比率，也就是調整visual viewport的大小，若是meta設置裏沒有對此作任何規定， 那麼layout viewport是多少這個就是多少；若是meta裏設了 initial-scale=1 , 那麼視窗寬度就等於dp寬度，也就是通過設備自行縮放後的寬度。正像咱們以前說的，通常就是320啦。

舉個栗子： meta裏這麼寫： width=700, 那麼layout寬度700，visual viewport寬度也會是700，恰好顯示所有文檔；

meta要是改爲width=700,initial-scale=1,layout依然是700，但visual viewport就變成了320！

Tips!

• chrome dev tool模擬的時候直接無視meta, 徹底按照物理像素來

• 瀏覽器喜歡保存你上次的縮放比。。。因此測試很是具備混淆性；改url比較保險 實際上有兩層縮放：

• iphone那個旋轉到landscape後的bug，實際上就是在容許用戶縮放的狀況下，當頁面從portrait旋轉到landscape的時候，頁面會自行放大。用戶必須雙敲兩下才會還原。解決的方法通常就是在旋轉時使用js修改meta，設置最大縮放比率爲1：maximum-scale=1 （參見iPhone Safari Viewport Scaling Bug）