移動(dòng)端webapp開發(fā)必備知識(shí)

《移動(dòng)端webapp開發(fā)必備知識(shí)》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在應(yīng)用文檔-天天文庫(kù)。

1、移動(dòng)端WebApp開發(fā)必備知識(shí)2013-09-0409:35佚名站長(zhǎng)之家字號(hào)：T

2、T移動(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)，以及給出幾種可選的解決方案。AD：2014WOT全球軟件技術(shù)峰會(huì)北京站課程視頻發(fā)布移動(dòng)設(shè)備的用戶越來越多，每天android手機(jī)的激活量都已經(jīng)超過130萬臺(tái)，所以我們面向移動(dòng)終端的WebAPP也開始跟進(jìn)了。本文主要介紹webapp的開發(fā)與

3、調(diào)試的相關(guān)知識(shí)和經(jīng)驗(yàn)，以及給出幾種可選的解決方案。一、基本概念（1）CSSpixels與devicepixelsCSSpixels：瀏覽器使用的抽象單位，主要用來在網(wǎng)頁(yè)上繪制內(nèi)容。devicepixels：顯示屏幕的的最小物理單位，每個(gè)dp包含自己的顏色、亮度。等值的CSSpixels在手機(jī)屏幕上占多大的位置，這不是固定的，這取決于很多屬性。經(jīng)過分析和總結(jié)，我們可以得出這么一條公式：1CSSpixels=（devicePixelRatio）^2devicepixels（^2是平方的意思，至于de

4、vicePixelRatio是什么東西，后面會(huì)講解）。（2）PPI/DPIPPI，有時(shí)也叫DPI，所表示的是每英寸所擁有的像素（pixel）數(shù)目，數(shù)值越高，即代表顯示屏能夠以越高的密度顯示圖像。（注：這里的像素，指的是devicepixels。）搞清楚了PPI是什么意思，我們就能很容易理解PPI的計(jì)算方式了，我們需要首先算出手機(jī)屏幕的對(duì)角線等效像素，然后處以對(duì)角線（我們平常所說的手機(jī)屏幕尺寸就是說的手機(jī)屏幕對(duì)角線的長(zhǎng)度），就可以得到PPI了。準(zhǔn)確的計(jì)算公示大家可以參照下圖。比較有意思的是，根據(jù)公

5、式計(jì)算出來的iPhone4的PPI為330，要比蘋果官方公布的326要高一點(diǎn)點(diǎn)。同理，以HTCG7為例，480*800的分辨率，3.7英寸，算出來就是252的PPI。（3）密度決定比例我們計(jì)算PPI就是為了知道一部手機(jī)設(shè)備是屬于哪個(gè)密度區(qū)間的，因?yàn)椴煌拿芏葏^(qū)間，對(duì)應(yīng)著不同的默認(rèn)縮放比例，這是一個(gè)很重要的概念。由上圖可知，PPI在120-160之間的手機(jī)被歸為低密度手機(jī)，160-240被歸為中密度，240-320被歸為高密度，320以上被歸為超高密度（Apple給了它一個(gè)上流的名字——retin

6、a）。這些密度對(duì)應(yīng)著一個(gè)特定的縮放比例值，拿我們最熟悉的iphone4或4s來說，它們的PPI是326，屬于超高密度的手機(jī)。當(dāng)我們書寫一個(gè)寬度為320px的頁(yè)面放到iphone中顯示，你會(huì)發(fā)現(xiàn)，它竟然是滿寬的。這是因?yàn)椋?yè)面被默認(rèn)放大了兩倍，也就是640px，而iphone4或4s的寬，正是640px。圖中把高密度的一類圈起來，是因?yàn)檫@是android手機(jī)的統(tǒng)計(jì)數(shù)據(jù)，在國(guó)內(nèi)安卓手機(jī)市場(chǎng)中，高密度的設(shè)備占了絕大多數(shù)的市場(chǎng)份額，這是很重要的一點(diǎn)，也是我們做安卓端webapp要注意的關(guān)鍵點(diǎn)。（4）vi

7、ewport的使用viewport總共有5個(gè)屬性，分別如下：在這些屬性里面，我們重點(diǎn)關(guān)注target-densitydpi，這個(gè)屬性可以改變?cè)O(shè)備的默認(rèn)縮放。medium-dpi是target-densitydpi的默認(rèn)值，如果我們顯式定義target-densitydpi=device-dpi，那么設(shè)備就會(huì)按照真實(shí)的dpi來渲染頁(yè)面。打個(gè)比方說，一張320*480的圖片，放在iphone4里面，默認(rèn)是占滿屏幕的，但如果定義了target-densitydpi=device-dpi，那么圖片只占屏

8、幕的四分之一（二分之一的平方），因?yàn)閕phone4的分辨率是640*960。二、解決方案（1）簡(jiǎn)單粗暴如果我們按照320px寬的設(shè)計(jì)稿去制作頁(yè)面，并且不做任何的設(shè)置，頁(yè)面會(huì)默認(rèn)自動(dòng)縮放到跟手機(jī)屏幕相等的寬度（這是由于medium-dpi是target-densitydpi的默認(rèn)值，和不同密度對(duì)應(yīng)不同縮放比例所決定的，這一切都是移動(dòng)設(shè)備自動(dòng)完成的）。所以這種解決方案，簡(jiǎn)單，粗暴，有效。但有一個(gè)致命的缺點(diǎn)，對(duì)于高密度和超高密度的手機(jī)設(shè)備，頁(yè)面（特別是圖片）會(huì)失真，而且密度越多，失真越厲害。（2）極致

9、完美在這種方案中，我們采用target-densitydpi=device-dpi，這樣一來，手機(jī)設(shè)備就會(huì)按照真實(shí)的像素?cái)?shù)目來渲染，用專業(yè)的話來說，就是1CSSpixels=1devicepixels。比如對(duì)于640*960的iphone，我們就可以做出640*960的頁(yè)面，在iphone上顯示也不會(huì)有滾動(dòng)條。當(dāng)然，對(duì)于其他設(shè)備，也需制作不同尺寸的頁(yè)面，所以這種方案往往是使用媒體查詢來做成響應(yīng)式的頁(yè)面。這種方案可以在特定的分辨率下完美呈現(xiàn)，但是隨著要兼容的不同分辨率越多，成本就越高，因?yàn)樾枰獮槊?/p>