pt电子游戏押注方法
添加到百度首頁
添加收藏 RSS 網站地圖 舊版網站
  • 全部
  • 網頁特效
  • 建站教程
  • 設計分享
當前位置:首頁 > 建站教程 > HTML5+CSS3 >

移動端webapp開發必備知識

時間:2014-09-28      來源:qianduan.net     

移動設備的用戶越來越多,每天android手機的激活量都已經超過130萬臺,所以我們面向移動終端的WebAPP也開始跟進了。本文主要介紹webapp的開發與調試的相關知識和經驗,以及給出幾種可選的解決方案。
 

一、基本概念

(1) CSS pixels與device pixels

CSS pixels: 瀏覽器使用的抽象單位, 主要用來在網頁上繪制內容。

device pixels: 顯示屏幕的的最小物理單位,每個dp包含自己的顏色、亮度。

等值的 CSS pixels在手機屏幕上占多大的位置,這不是固定的,這取決于很多屬性。經過分析和總結,我們可以得出這么一條公式: 1 CSS pixels = (devicePixelRatio)^2 device pixels (^2是平方的意思,至于 devicePixelRatio是什么東西,后面會講解) 。
 

(2) PPI/DPI

PPI,有時也叫DPI,所表示的是每英寸所擁有的像素(pixel)數目,數值越高,即代表顯示屏能夠以越高的密度顯示圖像。(注:這里的像素,指的是device pixels。)搞清楚了PPI是什么意思,我們就能很容易理解PPI的計算方式了,我們需要首先算出手機屏幕的對角線等效像素,然后處以對角線(我們平常所說的手機屏幕尺寸就是說的手機屏幕對角線的長度),就可以得到PPI了。準確的計算公示大家可以參照下圖。比較有意思的是,根據公式計算出來的iPhone 4的PPI為330,要比蘋果官方公布的326要高一點點。
 

移動端webapp開發必備知識-【科e互聯】
 

同理,以HTC G7為例,480*800的分辨率,3.7英寸,算出來就是252的PPI。
 

(3) 密度決定比例

我們計算PPI就是為了知道一部手機設備是屬于哪個密度區間的,因為不同的密度區間,對應著不同的默認縮放比例,這是一個很重要的概念。

移動端webapp開發必備知識-【科e互聯】
 

由上圖可知,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個屬性,分別如下:

<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] " />

在這些屬性里面,我們重點關注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,這樣一來,手機設備就會按照真實的像素數目來渲染,用專業的話來說,就是1 CSS pixels = 1 device pixels。比如對于 640*960的 iphone,我們就可以做出 640*960的頁面,在iphone上顯示也不會有滾動條。當然,對于其他設備,也需制作不同尺寸的頁面,所以這種方案往往是使用媒體查詢來做成響應式的頁面。這種方案可以在特定的分辨率下完美呈現,但是隨著要兼容的不同分辨率越多,成本就越高,因為需要為每一種分辨率書寫單獨的代碼。下面舉個簡單的例子:
 

<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);}
}

移動端webapp開發必備知識-【科e互聯】

(3) 合理折中

針對安卓設備絕大多數是高密度,部分是中密度的特點,我們可以采用一個折中的方案:我們對480px寬的設計稿進行還原,但是頁面制卻做成320px寬(使用background-size來對圖片進行縮小),然后,讓頁面自動按照比例縮放。這樣一來,低密度的手機有滾動條(這種手機基本上已經沒有人在用了),中密度的手機會浪費一點點流量,高密度的手機完美呈現,超高密度的手機輕微失真(超高密度的安卓手機很少)。這種方案的優點非常明顯:只需要一套設計稿,一套代碼(這里只是討論安卓手機的情況)。

相關文章
web前端視頻教程


大家都在看

最新更新

web前端視頻教程
pt电子游戏押注方法 麻将赢牌技巧 限红是什么意思 北京pk10一期人工计划 布鲁日 宾利国际ktv是荤的吗 双色球网上投注 买幸运28的方法 乐盈彩票赚钱吗 聚宝快3计划软件 组选包胆规则 6码中特资料 皇朝国际娱乐是哪个国家的