移動設(shè)備的用戶越來越多，每天android手機(jī)的激活量都已經(jīng)超過130萬臺，所以我們面向移動終端的WebAPP也開始跟進(jìn)了。本文主要介紹webapp的開發(fā)與調(diào)試的相關(guān)知識和經(jīng)驗，以及給出幾種可選的解決方案。
CSS pixels： 瀏覽器使用的抽象單位， 主要用來在網(wǎng)頁上繪制內(nèi)容。
device pixels： 顯示屏幕的的最小物理單位，每個dp包含自己的顏色、亮度。
等值的 CSS pixels在手機(jī)屏幕上占多大的位置，這不是固定的，這取決于很多屬性。經(jīng)過分析和總結(jié)，我們可以得出這么一條公式： 1 CSS pixels = （devicePixelRatio）^2 device pixels （^2是平方的意思，至于 devicePixelRatio是什么東西，后面會講解） 。
PPI，有時也叫DPI，所表示的是每英寸所擁有的像素（pixel）數(shù)目，數(shù)值越高，即代表顯示屏能夠以越高的密度顯示圖像。（注：這里的像素， 指的是device pixels。）搞清楚了PPI是什么意思，我們就能很容易理解PPI的計算方式了，我們需要首先算出手機(jī)屏幕的對角線等效像素，然后處以對角線（我們平 常所說的手機(jī)屏幕尺寸就是說的手機(jī)屏幕對角線的長度），就可以得到PPI了。準(zhǔn)確的計算公示大家可以參照下圖。比較有意思的是，根據(jù)公式計算出來的 iphone 4的PPI為330，要比蘋果官方公布的326要高一點點。
同理，以HTC G7為例，480*800的分辨率，3.7英寸，算出來就是252的PPI。
我們計算PPI就是為了知道一部手機(jī)設(shè)備是屬于哪個密度區(qū)間的，因為不同的密度區(qū)間，對應(yīng)著不同的默認(rèn)縮放比例，這是一個很重要的概念。
由上圖可知，PPI在120-160之間的手機(jī)被歸為低密度手機(jī)，160-240被歸為中密度，240-320被歸為高密度，320以上被歸為超高密度（Apple給了它一個上流的名字——retina）。
這些密度對應(yīng)著一個特定的縮放比例值，拿我們最熟悉的iphone4或4s來說，它們的PPI是326，屬于超高密度的手機(jī)。當(dāng)我們書寫一個寬度為 320px的頁面放到iphone中顯示，你會發(fā)現(xiàn)，它竟然是滿寬的。這是因為，頁面被默認(rèn)放大了兩倍，也就是640px，而iphone4或4s的寬， 正是640px。
圖中把高密度的一類圈起來，是因為這是android手機(jī)的統(tǒng)計數(shù)據(jù)，在國內(nèi)安卓手機(jī)市場中，高密度的設(shè)備占了絕大多數(shù)的市場份額，這是很重要的一點，也是我們做安卓端webapp要注意的關(guān)鍵點。
viewport總共有5個屬性，分別如下：
<meta name="viewport"content="height = [ pixel_value |device-height] ,width = [ pixel_value |device-width ] ,initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value ,user-scalable =[yes | no] ,target- densitydpi = [ dpi_value | device-dpi| high-dpi | medium-dpi | low-dpi] " />
在這些屬性里面，我們重點關(guān)注target-densitydpi，這個屬性可以改變設(shè)備的默認(rèn)縮放。 medium-dpi是target-densitydpi的默認(rèn)值，如果我們顯式定義target-densitydpi=device-dpi，那么 設(shè)備就會按照真實的dpi來渲染頁面。打個比方說，一張320*480的圖片，放在iphone4里面，默認(rèn)是占滿屏幕的，但如果定義了target- densitydpi=device-dpi，那么圖片只占屏幕的四分之一（二分之一的平方），因為iphone4的分辨率是640*960。
如果我們按照320px寬的設(shè)計稿去制作頁面，并且不做任何的設(shè)置，頁面會默認(rèn)自動縮放到跟手機(jī)屏幕相等的寬度（這是由于 medium-dpi是target-densitydpi的默認(rèn)值，和不同密度對應(yīng)不同縮放比例所決定的，這一切都是移動設(shè)備自動完成的 ）。所以這種解決方案，簡單，粗暴，有效。但有一個致命的缺點，對于高密度和超高密度的手機(jī)設(shè)備，頁面（特別是圖片）會失真，而且密度越多，失真越厲害。
在這種方案中，我們采用 target-densitydpi=device-dpi，這樣一來，手機(jī)設(shè)備就會按照真實的像素數(shù)目來渲染，用專業(yè)的話來說，就是1 CSS pixels = 1 device pixels。比如對于 640*960的 iphone，我們就可以做出 640*960的頁面，在iphone上顯示也不會有滾動條。當(dāng)然，對于其他設(shè)備，也需制作不同尺寸的頁面，所以這種方案往往是使用媒體查詢來做成響應(yīng)式 的頁面。這種方案可以在特定的分辨率下完美呈現(xiàn)，但是隨著要兼容的不同分辨率越多，成本就越高，因為需要為每一種分辨率書寫單獨的代碼。下面舉個簡單的例 子：
<meta name="viewport"content="target-densitydpi=device-dpi, width=device-width " />
#header {background:url (medium-density-image.png);}@media screen and (- webkit -device-pixel-ratio:1.5) {/* CSS for high-density screens */#header { background:url (high-density-image.png);}}@media screen and (- webkit -device-pixel-ratio:0.75) {/* CSS for low-density screens */#header { background:url (low-density-image.png);}}
針對安卓設(shè)備絕大多數(shù)是高密度，部分是中密度的特點，我們可以采用一個折中的方案：我們對480px寬的設(shè)計稿進(jìn)行還原，但是頁面制卻做成 320px寬（使用background-size來對圖片進(jìn)行縮小），然后，讓頁面自動按照比例縮放。這樣一來，低密度的手機(jī)有滾動條（這種手機(jī)基本上 已經(jīng)沒有人在用了），中密度的手機(jī)會浪費一點點流量，高密度的手機(jī)完美呈現(xiàn)，超高密度的手機(jī)輕微失真（超高密度的安卓手機(jī)很少）。這種方案的優(yōu)點非常明 顯：只需要一套設(shè)計稿，一套代碼（這里只是討論安卓手機(jī)的情況）。
Web開發(fā)者經(jīng)常使用Firefox的firebug或者Chrome的開發(fā)人員工具進(jìn)行Web調(diào)試，包括針對javaScript，DOM元素和CSS樣式的調(diào)試。但是，當(dāng)我們期望為移動Web站點或應(yīng)用進(jìn)行調(diào)試時，這些工具就很難派上用場。
weinre就是一個幫助我們在桌面來遠(yuǎn)程調(diào)試運行在移動設(shè)備瀏覽器內(nèi)的Web頁面或應(yīng)用的調(diào)試工具。weinre是WEb INspector REmote的簡寫，現(xiàn)在是Apache的一個開源項目，托管在github。
下面將介紹如此在日常工作使用它。
首先，我們要下載weinre的jar包——項目官方已經(jīng)找不到該jar文件，網(wǎng)上能夠找到，這里建議搭建個獨立的web服務(wù)器，jar運行后是一個本地的服務(wù)器，和web服務(wù)器差不多~~
然后通過運行dos命令來啟動它（請注意在你的電腦上已經(jīng)安裝有JDK）。運行命令如下，需要把路徑改成你的實際文件位置：
java -jar d:toolsweinre-jarweinre.jar –httpPort 8081 –boundHost -all- //（httpPort是指定服務(wù)端口，boundHost參數(shù)說明可以使用IP訪問，all參數(shù)代表支持所有的host）。
訪問localhost:8081，如果看到如下的頁面，說明weinre已經(jīng)啟動成功：
輸入debug client user interface地址（調(diào)試客戶端UI地址）。本例中即：http://localhost:8081/client/#anonymous，其 中#anonymous是默認(rèn)的調(diào)試id（debug id）。如果這個weinre調(diào)試服務(wù)器只是由你一個人使用，那么你可以使用默認(rèn)的debug id：anonymous。 啟動的weinre調(diào)試客戶端ui如下圖：
在需要調(diào)試的頁面加入中以下腳本：<script type=”text/Javascript” src=”http://localhost:8081/target/target-script-min.js#anonymous”>& lt;/script>，注意把localhost換成手機(jī)能夠訪問的真實IP地址。當(dāng)手機(jī)訪問這個頁面時，weinre客戶端就會檢測到目標(biāo)設(shè) 備，然后就可以對它進(jìn)行調(diào)試了。
因為手機(jī)上不方便截圖，我這里就用兩個瀏覽器窗口來展示效果，其實手機(jī)上的效果跟右邊是一樣的。
靜態(tài)頁面并不能滿足我們的需求，很多實際效果比如touch事件，滾動事件，鍵盤輸入事件等，都需要在真實的環(huán)境下測試，這時就需要用到模擬器。就 像我們測試ie6一樣，AVD模擬器可以類比于PC上的虛擬機(jī)，當(dāng)我們需要測試某一特定的機(jī)型時，我們可以新建一個AVD，進(jìn)行一系列的測試。不過使用 AVD的前提是已經(jīng)部署好android的開發(fā)環(huán)境，這個需要JDK + android SDK + Eclipse + ADT，還是稍微有點繁瑣。
在PC上，我們可以很方便地配host，但是手機(jī)上如何配host，這是一個問題。
這里主要使用fiddler和遠(yuǎn)程代理，實現(xiàn)手機(jī)配host的操作，具體操作如下：
以上就是我們在實際開發(fā)中積累的一些經(jīng)驗和技巧，希望能夠給大家一些幫助，如果你有好的方法或者工具，也請在留言中分享~~
新聞熱點
疑難解答
