《移動Web手冊》讀書筆記

關於瀏覽器

代理瀏覽器：顯示靜態文件，生成簡單的UI，高度壓縮資源文件，只須要一個請求和響應，節省流量，對於HTML/CSS處理很好，但沒有客戶端交互（每觸發一次js，均可能抓取新的內容，返回新的頁面，這個我在Opera Mini上嘗試過，點擊「展開閱讀全文」，須要等待較長時間，且刷新了整個頁面）。

混合瀏覽器：既能夠作完備瀏覽器，又能夠作代理瀏覽器，如Opera Mobile，Chrome等。

Android瀏覽器：

• 內置瀏覽器：基於WebKit渲染引擎;

• Chrome：基於Blink渲染引擎，一般與V8 javascript引擎配合使用。

• 開源瀏覽器Chromium：基於Blink渲染引擎;

• 三星Chrome：基於Chromium開發的三星內置瀏覽器;

• 等等。

視口

三種視口

• 佈局視口：遠寬於屏幕寬度，縮放不會影響佈局視口;

• 視覺視口：用戶正在看到的網站的區域，與設備屏幕同樣寬，但可經過縮放來操做視覺視口;

• 理想視口：擁有最理想的瀏覽與閱讀的寬度，用戶剛進頁面時不須要縮放。

一些術語

• 物理分辨率（DPI）：設備每英寸的點數;

• 設備像素比（DPR）：設備像素個數與理想視口的比，或者說物理設備像素：CSS邏輯像素。例如在iPhone 4設備屏幕中的物理像素數爲640960px,而CSS邏輯像素數爲320480像素。所以，使用大約4個物理像素來顯示一個CSS像素。例如在iphone4設備屏幕物理像素是640×960px，而CSS邏輯像素是320×480px，所以，大約4個物理像素來顯示一個CSS像素;

• dppx和dpi：dppx是1像素單位中的點數，dpi是1英寸單位中的點數，因爲在CSS標準中，1英寸=96像素，因此1dppx=96dpi。

meta視口

• width：設置佈局視口的寬度爲特定的值，設爲"device-width"將佈局視口設置成跟理想視口一致，設備旋轉時Safari不支持自動將佈局視口調整成理想視口（init-scale=1能解決這個問題）;

• init-scale：設置頁面的初始縮放程度，縮放程度跟視覺視口尺寸是逆相關的，通常設置成1時，視覺視口尺寸和理想視口尺寸同樣（IE10有着跟Safari徹底相反的問題，使用width=device-width可解決）;
  得出完美的meta視口：

  <meta name="viewport" content="width=device-width, initial-scale=1">

• minimum-scale和maximum-scale：設置最小/最大的縮放程度;

• user-scalable：是否阻止用戶進行縮放。這很邪惡，應該無視它。

媒體查詢：其實就是CSS的if語句

媒體查詢與js屬性相對應：

• 佈局視口尺寸：document.documentElement.clientWidth/Height，被廣泛支持;

• 視覺視口尺寸：window.innerWidth/Height，接近被廣泛支持;

• 理想視口尺寸：screen.width/height，可能獲得的是屏幕的設備像素尺寸，有嚴重的瀏覽器兼容問題;

• 設備屏幕比：window.devicePixelRatio;

• 屏幕方向：window.orientation。

參考資料

• 兩個viewport的故事（第一部分）

• 兩個viewport的故事（第二部分）

• 在各類高分辨率中使用像素

• 《移動Web手冊》讀書筆記