移動端WebApp開發必備知識2013-09-0409:35佚名站長之家字號：T|T收赫E3移動設備的用戶越來越多，每天android手機的激活量都已經超過130萬臺，所以我們面向移動終端的WebAPP也開始跟進了。本文主要介紹webapp的開發與調試的相關知識和經驗,以及給出幾種可選的解決方案。AD： 2014WOT全球軟件技術峰會北京站課程視頻發布移動設備的用戶越來越多，每天android手機的激活量都已經超過130萬臺，所以我們面向移動終端的WebAPP也開始跟進了。本文主要介紹webapp的開發與調試的相關知識和經驗，以及給出幾種可選的解決方案。一、基本概念（1） CSSpixels與devicepixelsCSSpixels：瀏覽器使用的抽象單位，主要用來在網頁上繪制內容。devicepixels：顯示屏幕的的最小物理單位，每個dp包含自己的顏色、亮度。等值的csspixels在手機屏幕上占多大的位置，這不是固定的，這取決于很多屬性。經過分析和總結，我們可以得出這么一條公式：1CSSpixels= （devicePixelRatio）"2devicepixels（"2是平方的意思，至于devicePixelRatio是什么東西，后面會講解）。（2） PPI/DPIPPI，有時也叫DPI,所表示的是每英寸所擁有的像素（pixel）數目，數值越高，即代表顯示屏能夠以越高的密度顯示圖像。（注：這里的像素，指的是devicepixels。）搞清楚了PPI是什么意思，我們就能很容易理解PPI的計算方式了，我們需要首先算出手機屏幕的對角線等效像素，然后處以對角線（我們平常所說的手機屏幕尺寸就是說的手機屏幕對角線的長度），就可以得到PPI了。準確的計算公示大家可以參照下圖。比較有意思的是，根據公式計算出來的iPhone4的PPI為330，要比蘋果官方公布的326要高一點點。

同理，以HTCG7為例，480*800的分辨率，3.7英寸，算出來就是252的PPI。（3） 密度決定比例我們計算PPI就是為了知道一部手機設備是屬于哪個密度區間的，因為不同的密度區間，對應著不同的默認縮放比例，這是一個很重要的概念。Idpiendpihdpixhdpi密窒分界120160240320常見屏幕尺寸 240*320480*80(]640*960默認縮放比例0.75 1.0L52.0由上圖可知，PPI在120-160之間的手機被歸為低密度手機，160-240被歸為中密度，240-320被歸為高密度，320以上被歸為超高密度（Apple給了它一個上流的名字——retina）。這些密度對應著一個特定的縮放比例值，拿我們最熟悉的iphone4或4s來說，它們的PPI是326,屬于超高密度的手機。當我們書寫一個寬度為320px的頁面放到iphone中顯示，你會發現，它竟然是滿寬的。這是因為，頁面被默認放大了兩倍，也就是640px，而iphone4或4s的寬，正是640px。圖中把高密度的一類圈起來，是因為這是android手機的統計數據，在國內安卓手機市場中，高密度的設備占了絕大多數的市場份額，這是很重要的一點，也是我們做安卓端webapp要注意的關鍵點。（4） viewport的使用viewport總共有5個屬性，分別如下：在這些屬性里面，我們重點關注target-densitydpi，這個屬性可以改變設備的默認縮放。medium-dpi是target-densitydpi的默認值，如果我們顯式定義target-densitydpi=device-dpi，那么設備就會按照真實的dpi來渲染頁面。打個比方說，一張320*480的圖片，放在iphone4里面，默認是占滿屏幕的，但如果定義了target-densitydpi=device-dpi,那么圖片只占屏幕的四分之一（二分之一的平方），因為iphone4的分辨率是640*960。二、解決方案（1，簡單粗暴如果我們按照320px寬的設計稿去制作頁面，并且不做任何的設置，頁面會默認自動縮放到跟手機屏幕相等的寬度（這是由于medium-dpi是target-densitydpi的默認值，和不同密度對應不同縮放比例所決定的，這一切都是移動設備自動完成的，。所以這種解決方案，簡單，粗暴，有效。但有一個致命的缺點，對于高密度和超高密度的手機設備，頁面（特別是圖片，會失真，而且密度越多，失真越厲害。（2，極致完美在這種方案中，我們采用target-densitydpi=device-dpi，這樣一來，手機設備就會按照真實的像素數目來渲染，用專業的話來說，就是1CSSpixels=1devicepixels。比如對于640*960的iphone，我們就可以做出640*960的頁面，在iphone上顯示也不會有滾動條。當然，對于其他設備，也需制作不同尺寸的頁面，所以這種方案往往是使用媒體查詢來做成響應式的頁面。這種方案可以在特定的分辨率下完美呈現，但是隨著要兼容的不同分辨率越多，成本就越高，因為需要為每一種分辨率書寫單獨的代碼。下面舉個簡單的例子：

high-densFty medium-density（3）合理折中針對安卓設備絕大多數是高密度，部分是中密度的特點，我們可以采用一個折中的方案：我們對480px寬的設計稿進行還原，但是頁面制做卻成320px寬（使用background-size來對圖片進行縮小），然后，讓頁面自動按照比例縮放。這樣一來，低密度的手機有滾動條（這種手機基本上已經沒有人在用了），中密度的手機會浪費一點點流量，高密度的手機完美呈現，超高密度的手機輕微失真（超高密度的安卓手機很少）。這種方案的優點非常明顯：只需要一套設計稿，一套代碼（這里只是討論安卓手機的情況）。三、開發調試1）weinre遠程實時調試Web開發者經常使用Firefox的firebug或者Chrome的開發人員工具進行Web調試，包括針對JavaScript,DOM元素和CSS樣式的調試。但是，當我們期望為移動Web站點或應用進行調試時，這些工具就很難派上用場。weinre就是一個幫助我們在桌面來遠程調試運行在移動設備瀏覽器內的Web頁面或應用的調試工具。weinre是WEbINspectorREmote的簡寫，現在是Apache的一個開源項目，托管在github。下面將介紹如此在日常工作使用它。首先，我們要下載weinre的jar包一一項目官方已經找不到該jar文件，網上能夠找到，這里建議搭建個獨立的web服務器，jar運行后是一個本地的服務器，和web服務器差不多~~然后通過運行dos命令來啟動它（請注意在你的電腦上已經安裝有JDK）。運行命令如下，需要把路徑改成你的實際文件位置：C'MJWip-r-aXt-i/p-qnpan.ILnCkNJSws-lctop>Javji d-：9毋X?■皿工口FqM8朋丄一hDundHost;-all-2Q12-31-2020?27；i7.i4￡dHFO?:de>y-SMftPSN012用丄Z-11-2B20;27;丄7-2産勺;】HFO;;￡ta：rtei^SelectChararielCariii日■胚刊日12012-11-2B20：2V?17-225dNKlrwcin?；Hf]J,ucrucr atlittp：^ZLgcIho：SX訪問localhost:8081，如果看到如下的頁面，說明weinre已經啟動成功:weinre-webinspectorremoteAccessPointsduhug uses?Lnt :ht~tpn丿〕口￡皿hc^t:gOElf1岸斤十/ff的勸你殆ws：dgeiinej：wion： Inin:J門曲Ihna『:RDE1fJtaxg.?t-dLms: 1^,1:廿：丿丿】心<"淺111巧總上：啊匕iirireir^uso—hJroJ^aaiojirt^BSij生IjlLLI-；丄上1?—二1L；*s*■?8081.'*licz>U?■，17inLE2丄匚工」hLti■:芒?ariL'i"'iijUiij：；TrtrgctScripticojesnuset^iisso'ijittsinj&c5lhe^eiararetar&et-so-deinto旳型webp>agtrhttdi捉I, 1皿州rWO買；十aFR^Jt中Prirt-■mt亍肓u^rrem拒Eianplpr■Lscriptstt="htt?VXlD-ralhast:6081/t□xiEt/tarEet-scT^pt-szE-jrfancnysiDiji^?C/zmpit；■IrirgstRonkm/irklstTerueariue?rhistbaakrtarkleTto：Lnjeitthew**iftr*ratjetc*dtintasuty籾電bp豊#you*r#viswin趴linky^d亡皿dra$idyourboofsrark瓷：trigiGft"豊四存村皿hddkfTEftrk]triKr]ihapr-t:ja^sciljn；(fUiicclctiCftl-le.seiiAnrituieCatc"?JLttp://Ic&slhftstsSG6J/1 ai?ji-sliiui-Mn-jiSano邛:d^cuAmi輸入debugclientuserinterface地址(調試客戶端UI地址)。本例中即：http://localhost:8081/client/#anonymous,其中#anonymous是默認的調試id(debugid)。如果這個weinre調試服務器只是由你一個人使用，那么你可以使用默認的debugid：anonymous。啟動的weinre調試客戶端ui如下圖：Targets'5 [weinreClients? [ch.-aiEn.eLz1090886674id：anoayitous]ServerPropertiesboun遙花唱電：-111-bvundHbst^Z?0;0；0：0：0：0;0;L￡9fi0：0：0：0：0：5e￡s：alO:'.0611(12feSO：C*：O：O：O：lO0；7f：ffYs%19ty$onparrFCO-1cn^cni.contysonpatj-fCO..teneent.cond&athTineout：15httpRort：esadTinieout;只eu^eAddi-:verbose：30316■txuefalse>z在需要調試的頁面加入中以下腳本：，注意把localhost換成手機能夠訪問的真實IP地址。當手機訪問這個頁面時，weinre客戶端就會檢測到目標設備，然后就可以對它進行調試了。&■I:jf：H抵於睨總蜀■瑩尢審&■I:jf：H抵於睨總蜀■瑩尢審-舟曲上皿片*1卜皐門■?L?HM4?p*ALn?L2■:.J!--"2M3i- ?5L-!■! ■I*jA>>El..”￡?”匸 JaLs”fb-!dl-C■ ”?■I?T-i小F|>H4_|C+aii?-<?^■&??■■■■-.■?i-gM*"v-151-ki-m："!■!ri1nti：KV?■<mt?hr<rFgJ(■就■“■■2訂訂■十?-1^電匸^.帕2；爾口網獨匚詢臨事盃札.》*什?/郎乳.卜e至盟出UeJr[ftiilgaffgaw-￡■0 *I*口wensI14Oi應嗚湍/GJ1o■仙1因為手機上不方便截圖，我這里就用兩個瀏覽器窗口來展示效果，其實手機上的效果跟右邊是一樣的。2）AVD模擬器調試靜態頁面并不能滿足我們的需求，很多實際效果比如touch事件，滾動事件，鍵盤輸入事件等，都需要在真實的環境下測試，這時就需要用到模擬器。就像我們測試ie6—樣，AVD模擬器可以類比于PC上的虛擬機，當我們需要測試某一特定的機型時，我們可以新建一個AVD，進行一系列的測試。不過使用AVD的前提是已經部署好android的開發環境，這個需要JDK+androidSDK+Eclipse+ADT，還是稍微有點繁瑣。（3）手機抓包與配host在PC上，我們可以很方便地配host，但是手機上如何配host，這是一個問題。這里主要使用fiddler和遠程代理，實現手機配host的操作，具體操作如下：1?首先，保證PC和移動設備在同一個局域網下；PC上開啟fiddler，并在設置中勾選“allowre