【51CTO獨(dú)家譯文】本文為開發(fā)者Sam Gentile的一篇博文《Hybrid App:借助HTML5、JavaScript和CSS3開發(fā)》。

[[77472]]

以下為全部譯文：

我（51CTO注：Sam Gentile）曾提過(guò)兩個(gè)關(guān)鍵概念，它們對(duì)于用這些技術(shù)來(lái)開發(fā)移動(dòng)應(yīng)用程序而言極為重要：

1. 視圖元標(biāo)簽（Viewport Meta Tag）
2. CSS媒體查詢（CSS Media Queries）

雖然我介紹了這兩個(gè)重要的基本概念，但當(dāng)時(shí)還處在邊學(xué)習(xí)邊摸索的階段，所以現(xiàn)在覺(jué)得那時(shí)給出的上下文和解釋不夠（我舉了一個(gè)媒體查詢的例子，卻沒(méi)有定義媒體查詢、也沒(méi)有交待媒體查詢的用途！）本文試圖彌補(bǔ)一些缺憾。

 上面這番話沒(méi)錯(cuò)，但主要還是看你在構(gòu)建哪種類型的應(yīng)用程序。如今大家之所以對(duì)HTML5、CSS3及相關(guān)的JavaScript API抱有如此高漲的興趣，原因完全在于，大家不想構(gòu)建“原生”的移動(dòng)應(yīng)用程序，至少在企業(yè)領(lǐng)域不想這么做。原生移動(dòng)應(yīng)用程序需要你為每一種平臺(tái)學(xué)習(xí)不同的編程語(yǔ)言和集成開發(fā)環(huán)境（IDE）。相反，我們大多數(shù)人都想重復(fù)運(yùn)用我們?cè)跇?gòu)建“Web應(yīng)用程序”方面已經(jīng)掌握的現(xiàn)有技能，可以重復(fù)使用一些代碼。這屬于“Hybrid”或“純粹”的移動(dòng)應(yīng)用程序這個(gè)類別。如果你不需要訪問(wèn)設(shè)備的原生功能，就可以只用HTML5和CSS3來(lái)構(gòu)建一個(gè)“純粹”的移動(dòng)Web應(yīng)用程序。但是這種情況并不多見。這種類型的應(yīng)用程序在充分利用那些設(shè)備上的原生傳感器和API方面本領(lǐng)有限。雖然一些功能（如地理位置）提供給了移動(dòng)瀏覽器，但還是有許多功能并沒(méi)有提供，比如方向感應(yīng)器或視頻。不過(guò)好消息是，大行其道的Web編程讓HTML5、JavaScript和CSS能夠在某種程度上“走原生道路”。PhoneGap和Titanium Appcelerator等流行的框架讓你能夠使用HTML5和JavaScript，為iOS、Android和Windows Phone開發(fā)原生應(yīng)用程序，另外還可以訪問(wèn)設(shè)備。因而，“Hybrid App”隨之出現(xiàn)。

[[77473]]

我談?wù)摿艘暱诤兔襟w查詢，但是基于所謂的自適應(yīng)或響應(yīng)式Web應(yīng)用程序這一上下文，這類應(yīng)用程序可以隨不同的設(shè)備而按比例增加或縮減。最近出現(xiàn)了幾個(gè)變化，讓Hybrid App開發(fā)成為了可能：

• 移動(dòng)標(biāo)簽讓移動(dòng)瀏覽器不要按比例縮減你的站點(diǎn)
• 新標(biāo)準(zhǔn)大大簡(jiǎn)化了構(gòu)建可在多種移動(dòng)瀏覽器中正常運(yùn)行的站點(diǎn)這一任務(wù)
• 新標(biāo)準(zhǔn)使得構(gòu)建的站點(diǎn)運(yùn)行起來(lái)更像Web應(yīng)用程序。

這些標(biāo)準(zhǔn)包括HTML5標(biāo)準(zhǔn)系列和CSS3。我在此探討HTML5。

我之前談?wù)摿艘暱谠獦?biāo)簽：那么，什么是視口元標(biāo)簽?zāi)兀恳暱谠獦?biāo)簽由蘋果Mobile Safari引入，目的是為了讓W(xué)eb開發(fā)者可以控制視口的比例和大小。現(xiàn)在它成了一項(xiàng)普遍的標(biāo)準(zhǔn)。除非你另有要求，否則iPhone上的Safari會(huì)假設(shè)你的頁(yè)面寬度是980px。如果你想為iPhone和尺寸比較小的BlackBerry設(shè)備進(jìn)行移動(dòng)Web開發(fā)，就得讓Mobile Safari（或面向BlackBerry的Ripple）知道這一點(diǎn)，為此需要把視圖元標(biāo)簽添加到HTML文檔中根據(jù)設(shè)備寬度來(lái)設(shè)定的頭部分：

<meta name="viewport" content="user-scalable=no, width=device-width" /> 

我當(dāng)時(shí)舉了一個(gè)媒體查詢的例子，但未作深入討論！

<link rel="stylesheet" type="text/css" href="iphone.css"  
media="only screen and (max-width: 480px)" /> 

媒體查詢（CSS3的新增特性）功能很強(qiáng)大，我鼓勵(lì)各位讀一下Dan Wahlin所寫的這篇博文，詳細(xì)介紹了媒體查詢；不過(guò)大體意思是，它們是一種可以評(píng)價(jià)為真或假的CSS表達(dá)式。如果是真，就會(huì)運(yùn)用表達(dá)式的CSS選擇器和屬性。如果與CSS級(jí)聯(lián)規(guī)則結(jié)合使用，它讓你能夠響應(yīng)不同的分辨率、方向或者分辨率或方向的變化。這個(gè)規(guī)則實(shí)際上是說(shuō)“對(duì)設(shè)備最大寬度是480px的移動(dòng)設(shè)備來(lái)說(shuō)，就運(yùn)用iPhone樣式表。”

同樣，這篇博文只是觸及了這整個(gè)方面的皮毛，但愿彌補(bǔ)了一些缺憾，并且闡述了視口和媒體查詢，這是用HTML5、JavaScript和CSS3來(lái)構(gòu)建Hybrid App的兩個(gè)基本概念。我打算以后更深入地介紹這些內(nèi)容。

原文地址：http://samgentile.com/Web/html5-css3-jquery/hybrid-mobile-applications-with-html5-javascript-and-css3/

【51CTO譯稿，非經(jīng)授權(quán)謝絕轉(zhuǎn)載，合作媒體轉(zhuǎn)載請(qǐng)注明原文出處、作者及51CTO譯者！】