【學習筆記】移動Web手冊（PPK力做）

又是很久沒寫博客了，最近把近半年的總結，所有總結到博客園吧。先寫最近的一個移動端的學習筆記。畢竟移動端開發了一段時間，就寫一寫讀《移動web手冊》中，對我感觸比較深的幾個點——

1、瀏覽器相關

1. 瀏覽器的類型——內置瀏覽器、可下載瀏覽器、代理瀏覽器以及webview。這裏的代理瀏覽器是指服務端進行對頁面的渲染，把結果發送給客戶端進行顯示，比較少見。

2. 內置瀏覽器的升級——大多數內置瀏覽器都被緊密集成到底層的操做系統中，也就是說，沒法單獨升級瀏覽器。所以，爲了獲得新的Safary版本，你必須升級IOS。

3. 解釋WebView——WebView是留給原生應用的一個操做系統瀏覽接口。蘋果不容許在IOS設備上安裝其餘渲染引擎。（其餘平臺是能夠的）所以，其餘瀏覽器要想在IOS上安裝就必須用蘋果的WebView。IOS上的Chrome就是這樣的，一樣的還有Opera Coast。大致上，WebView是獨立的程序，用了內置瀏覽器不少底層的組件（好比渲染引擎），可是在其餘方面可能會有所不一樣。若是但願你的頁面能在WebView裏跑起來的話，你最好在WebView上測試一下。

4. 手機上的WebKit——先列出不使用WebKit的瀏覽器：

1. IE Mobile使用Trident
2. Opera Mini使用Presto，可是最終會換成Blink
3. Chrome瀏覽器用Blink
4. Firefox Mobile和Firefox OS使用Gecko
5. UC Mini、Nokia Xpress還有Jolla的Sailfish OS上的內置瀏覽器也用的是Gecko

任何沒在上面提到的瀏覽器都用WebKit。乍一看，這麼多瀏覽器都用WebKit的事實對於Web開發者彷佛是一個強大的支持，不幸的是，一個瀏覽器用Webkit並不意味着它跟其餘任何基於Webkit的瀏覽器同樣。實際上，它們有很大的不一樣，依賴於操做系統、鍵盤、鼠標還有觸屏交互。平臺全部者必須提供全部這些功能。

因此，手機上沒有WebKit。不少瀏覽器用着差很少同樣的渲染引擎可是在細節上卻大不相同。你最好在全部不一樣的基於WebKit的瀏覽器上測試你的網站。

5. 測試Android瀏覽器——對於Android設備的瀏覽器，有三個必須測試的瀏覽器：

1. 安卓WebKit4，富含不一樣的設備和不一樣版本的安卓系統。一個專門的設備實驗室須要大概6到8個這樣的來自不一樣廠商的設備。一個小型實驗室必須擁有2到3個：三星、HTC和一個其餘廠商的設備
2. Google Chrome。若是你的設備上沒有，下載一個。
3. 三星Chrome（三星字Galaxy S4發佈以來，三星開始使用他本身開發的基於Chromium的一款瀏覽器做爲內置瀏覽器，所以出現三星Chrome）。你講須要購買一個2013年獲之後發佈的三星高端手機——相似Galaxy S4或更新的設備

 

2、視口相關

1. css像素和設備像素——一個css像素至關於多少個設備像素取決於屏幕的特性（是不是高密度）和用戶進行的縮放。用戶放大得越大，一個css像素覆蓋的設備像素越多。當在使用css和javascript的時候，你並不在乎一個css像素跨越了多少個設備像素。你開心地講這個依賴於屏幕特性和用戶縮放程度的複雜計算交給了瀏覽器。這就是爲何css像素是專門爲咱們Web開發者創造的一個抽象層。

2. 佈局視口：CSS佈局會根據它來計算，並被它約束。在手機上，爲了容納爲桌面瀏覽器設計的網站，默認的佈局視口寬度遠大於屏幕的寬度。

<!-- width屬性設置佈局視口的寬度爲特定的值 -->
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

3. 視覺視口：它是用戶正在看到的網站的區域。用戶能夠縮放來操做視覺視口，同時不會影響佈局視口，佈局視口仍保持在原來的寬度。視覺視口與設備屏幕同樣寬，而且它的CSS像素的數量會隨着用戶縮放而改變。

4. 理想視口：對於特定設備上的特定瀏覽器的佈局視口的一個理想尺寸，用戶剛進入頁面時再也不須要縮放，擁有最理想的瀏覽和閱讀的寬度

5. 設備像素比：設備像素個數和理想視口的比，成爲設備像素比（Device Pixel Ratio），簡稱DPR。在js中可使用window.devicePixelRatio來獲取

6. meta標籤：meta視口標籤存在的主要目的是讓佈局視口的尺寸和理想視口的尺寸匹配。

7. 視口尺寸度量：document.documentElement.clientWidth/Height返回的是佈局視口的尺寸，被廣泛支持。window.innerWidth/Height返回視覺視口的尺寸。接近被廣泛支持。screen.width/height返回理想視口的尺寸。有很嚴重的瀏覽器兼容性 問題。

 

3、性能相關

1. css過分和動畫——它們的問題不在瀏覽器，而在設備，瀏覽器對二者的支持都很好。可是爲了達到很是平滑的效果，瀏覽器必須藉助設備GPU的計算能力。在高端智能手機上不成問題，但對於早期和廉價的手機來講，它們可能根本沒有響應的硬件和系統API。這就致使最終的動畫效果很生硬。因此，只要你使用了過分和動畫，就在你能找到的最老、最差的設備上進行測試。

 

最後附上這本書的封面圖片——