資源描述:
《移動端webapp開發(fā)必備知識》由會員上傳分享,免費在線閱讀,更多相關(guān)內(nèi)容在應(yīng)用文檔-天天文庫。
1、移動端WebApp開發(fā)必備知識2013-09-0409:35佚名站長之家字號:T
2、T移動設(shè)備的用戶越來越多,每天android手機的激活量都已經(jīng)超過130萬臺,所以我們面向移動終端的WebAPP也開始跟進了。本文主要介紹webapp的開發(fā)與調(diào)試的相關(guān)知識和經(jīng)驗,以及給出幾種可選的解決方案。AD:2014WOT全球軟件技術(shù)峰會北京站課程視頻發(fā)布移動設(shè)備的用戶越來越多,每天android手機的激活量都已經(jīng)超過130萬臺,所以我們面向移動終端的WebAPP也開始跟進了。本文主要介紹webapp的開發(fā)與調(diào)試的相關(guān)知識和經(jīng)驗,以及給出幾種可選的解決方案。一、基本概念(1)CSSpixels與devi
3、cepixelsCSSpixels:瀏覽器使用的抽象單位,主要用來在網(wǎng)頁上繪制內(nèi)容。devicepixels:顯示屏幕的的最小物理單位,每個dp包含自己的顏色、亮度。等值的CSSpixels在手機屏幕上占多大的位置,這不是固定的,這取決于很多屬性。經(jīng)過分析和總結(jié),我們可以得出這么一條公式:1CSSpixels=(devicePixelRatio)^2devicepixels(^2是平方的意思,至于devicePixelRatio是什么東西,后面會講解)。(2)PPI/DPIPPI,有時也叫DPI,所表示的是每英寸所擁有的像素(pixel)數(shù)目,數(shù)值越高,即代表顯示屏能夠以越高的密度顯示圖像
4、。(注:這里的像素,指的是devicepixels。)搞清楚了PPI是什么意思,我們就能很容易理解PPI的計算方式了,我們需要首先算出手機屏幕的對角線等效像素,然后處以對角線(我們平常所說的手機屏幕尺寸就是說的手機屏幕對角線的長度),就可以得到PPI了。準確的計算公示大家可以參照下圖。比較有意思的是,根據(jù)公式計算出來的iPhone4的PPI為330,要比蘋果官方公布的326要高一點點。同理,以HTCG7為例,480*800的分辨率,3.7英寸,算出來就是252的PPI。(3)密度決定比例我們計算PPI就是為了知道一部手機設(shè)備是屬于哪個密度區(qū)間的,因為不同的密度區(qū)間,對應(yīng)著不同的默認縮放比例
5、,這是一個很重要的概念。由上圖可知,PPI在120-160之間的手機被歸為低密度手機,160-240被歸為中密度,240-320被歸為高密度,320以上被歸為超高密度(Apple給了它一個上流的名字——retina)。這些密度對應(yīng)著一個特定的縮放比例值,拿我們最熟悉的iphone4或4s來說,它們的PPI是326,屬于超高密度的手機。當(dāng)我們書寫一個寬度為320px的頁面放到iphone中顯示,你會發(fā)現(xiàn),它竟然是滿寬的。這是因為,頁面被默認放大了兩倍,也就是640px,而iphone4或4s的寬,正是640px。圖中把高密度的一類圈起來,是因為這是android手機的統(tǒng)計數(shù)據(jù),在國內(nèi)安卓手機
6、市場中,高密度的設(shè)備占了絕大多數(shù)的市場份額,這是很重要的一點,也是我們做安卓端webapp要注意的關(guān)鍵點。(4)viewport的使用viewport總共有5個屬性,分別如下:在這些屬性里面,我們重點關(guān)注target-densitydpi,這個屬性可以改變設(shè)備的默認縮放。medium-dpi是target-densitydpi的默認值,如果我們顯式定義target-densitydpi=device-dpi,那么設(shè)備就會按照真實的dpi來渲染頁面。打個比方說,一張320*480的圖片,放在iphone4里面,默認是占滿屏幕的,但如果定義了target-densitydpi=device-d
7、pi,那么圖片只占屏幕的四分之一(二分之一的平方),因為iphone4的分辨率是640*960。二、解決方案(1)簡單粗暴如果我們按照320px寬的設(shè)計稿去制作頁面,并且不做任何的設(shè)置,頁面會默認自動縮放到跟手機屏幕相等的寬度(這是由于medium-dpi是target-densitydpi的默認值,和不同密度對應(yīng)不同縮放比例所決定的,這一切都是移動設(shè)備自動完成的)。所以這種解決方案,簡單,粗暴,有效。但有一個致命的缺點,對于高密度和超高密度的手機設(shè)備,頁面(特別是圖片)會失真,而且密度越多,失真越厲害。(2)極致完美在這種方案中,我們采用target-densitydpi=device-
8、dpi,這樣一來,手機設(shè)備就會按照真實的像素數(shù)目來渲染,用專業(yè)的話來說,就是1CSSpixels=1devicepixels。比如對于640*960的iphone,我們就可以做出640*960的頁面,在iphone上顯示也不會有滾動條。當(dāng)然,對于其他設(shè)備,也需制作不同尺寸的頁面,所以這種方案往往是使用媒體查詢來做成響應(yīng)式的頁面。這種方案可以在特定的分辨率下完美呈現(xiàn),但是隨著要兼容的不同分辨率越多,成本就越高,因為需要為每