標(biāo)簽：
又是好久沒寫博客了，最近把近半年的總結(jié)，全部總結(jié)到博客園吧。先寫最近的一個移動端的學(xué)習(xí)筆記。畢竟移動端開發(fā)了一段時間，就寫一寫度《移動web手冊》中，對我感觸比較深的幾個點——
一、瀏覽器相關(guān)
1. 瀏覽器的類型——內(nèi)置瀏覽器、可下載瀏覽器、代理瀏覽器以及webview。這里的代理瀏覽器是指服務(wù)端進(jìn)行對頁面的渲染，把結(jié)果發(fā)送給客戶端進(jìn)行顯示，比較少見。
2. 內(nèi)置瀏覽器的升級——大多數(shù)內(nèi)置瀏覽器都被緊密集成到底層的操作系統(tǒng)中，也就是說，無法單獨升級瀏覽器。因此，為了得到新的Safary版本，你必須升級IOS。
3. 解釋W(xué)ebView——WebView是留給原生應(yīng)用的一個操作系統(tǒng)瀏覽接口。蘋果不允許在IOS設(shè)備上安裝其他渲染引擎。（其他平臺是可以的）因此，其他瀏覽器要想在IOS上安裝就必須用蘋果的WebView。IOS上的Chrome就是這樣的，同樣的還有Opera Coast。大體上，WebView是獨立的程序，用了內(nèi)置瀏覽器很多底層的組件（比如渲染引擎），但是在其他方面可能會有所不同。如果希望你的頁面能在WebView里跑起來的話，你最好在WebView上測試一下。
4. 手機(jī)上的WebKit——先列出不使用WebKit的瀏覽器：
1. IE Mobile使用Trident2. Opera Mini使用Presto，但是最終會換成Blink3. Chrome瀏覽器用Blink4. Firefox Mobile和Firefox OS使用Gecko5. UC Mini、Nokia Xpress還有Jolla的Sailfish OS上的內(nèi)置瀏覽器也用的是Gecko
任何沒在上面提到的瀏覽器都用WebKit。乍一看，這么多瀏覽器都用WebKit的事實對于Web開發(fā)者似乎是一個強(qiáng)大的支持，不幸的是，一個瀏覽器用Webkit并不意味著它跟其他任何基于Webkit的瀏覽器一樣。實際上，它們有很大的不同，依賴于操作系統(tǒng)、鍵盤、鼠標(biāo)還有觸屏交互。平臺所有者必須提供所有這些功能。
所以，手機(jī)上沒有WebKit。很多瀏覽器用著差不多一樣的渲染引擎但是在細(xì)節(jié)上卻大不相同。你最好在所有不同的基于WebKit的瀏覽器上測試你的網(wǎng)站。
5. 測試Android瀏覽器——對于Android設(shè)備的瀏覽器，有三個必須測試的瀏覽器：
1. 安卓WebKit4，富含不同的設(shè)備和不同版本的安卓系統(tǒng)。一個專門的設(shè)備實驗室需要大概6到8個這樣的來自不同廠商的設(shè)備。一個小型實驗室必須擁有2到3個：三星、HTC和一個其他廠商的設(shè)備2. Google Chrome。如果你的設(shè)備上沒有，下載一個。3. 三星Chrome（三星字Galaxy S4發(fā)布以來，三星開始使用他自己開發(fā)的基于Chromium的一款瀏覽器作為內(nèi)置瀏覽器，因此出現(xiàn)三星Chrome）。你講需要購買一個2013年獲以后發(fā)布的三星高端手機(jī)——類似Galaxy S4或更新的設(shè)備
二、視口相關(guān)
1. css像素和設(shè)備像素——一個css像素相當(dāng)于多少個設(shè)備像素取決于屏幕的特性（是否是高密度）和用戶進(jìn)行的縮放。用戶放大得越大，一個css像素覆蓋的設(shè)備像素越多。當(dāng)在使用css和javascript的時候，你并不在意一個css像素跨越了多少個設(shè)備像素。你開心地講這個依賴于屏幕特性和用戶縮放程度的復(fù)雜計算交給了瀏覽器。這就是為什么css像素是專門為我們Web開發(fā)者創(chuàng)造的一個抽象層。
2. 布局視口：CSS布局會根據(jù)它來計算，并被它約束。在手機(jī)上，為了容納為桌面瀏覽器設(shè)計的網(wǎng)站，默認(rèn)的布局視口寬度遠(yuǎn)大于屏幕的寬度。
<!-- width屬性設(shè)置布局視口的寬度為特定的值 --><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
3. 視覺視口：它是用戶正在看到的網(wǎng)站的區(qū)域。用戶可以縮放來操作視覺視口，同時不會影響布局視口，布局視口仍保持在原來的寬度。視覺視口與設(shè)備屏幕一樣寬，并且它的CSS像素的數(shù)量會隨著用戶縮放而改變。
4. 理想視口：對于特定設(shè)備上的特定瀏覽器的布局視口的一個理想尺寸，用戶剛進(jìn)入頁面時不再需要縮放，擁有最理想的瀏覽和閱讀的寬度
5. 設(shè)備像素比：設(shè)備像素個數(shù)和理想視口的比，成為設(shè)備像素比（Device Pixel Ratio），簡稱DPR。在js中可以使用window.devicePixelRatio來獲取
6. meta標(biāo)簽：meta視口標(biāo)簽存在的主要目的是讓布局視口的尺寸和理想視口的尺寸匹配。
7. 視口尺寸度量：document.documentElement.clientWidth/Height返回的是布局視口的尺寸，被普遍支持。window.innerWidth/Height返回視覺視口的尺寸。接近被普遍支持。screen.width/height返回理想視口的尺寸。有很嚴(yán)重的瀏覽器兼容性 問題。
三、性能相關(guān)
1. css過度和動畫——它們的問題不在瀏覽器，而在設(shè)備，瀏覽器對兩者的支持都很好。但是為了達(dá)到非常平滑的效果，瀏覽器必須借助設(shè)備GPU的計算能力。在高端智能手機(jī)上不成問題，但對于早期和廉價的手機(jī)來說，它們可能根本沒有響應(yīng)的硬件和系統(tǒng)API。這就導(dǎo)致最終的動畫效果很生硬。所以，只要你使用了過度和動畫，就在你能找到的最老、最差的設(shè)備上進(jìn)行測試。
最后附上這本書的封面圖片——
標(biāo)簽：
