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