Hybrid App:借助HTML5、JavaScript和CSS3開發(fā)
譯文【51CTO獨(dú)家譯文】本文為開發(fā)者Sam Gentile的一篇博文《Hybrid App:借助HTML5、JavaScript和CSS3開發(fā)》。
以下為全部譯文：
我（51CTO注：Sam Gentile）曾提過兩個(gè)關(guān)鍵概念，它們對(duì)于用這些技術(shù)來開發(fā)移動(dòng)應(yīng)用程序而言極為重要：
- 視圖元標(biāo)簽（Viewport Meta Tag）
- CSS媒體查詢（CSS Media Queries）
雖然我介紹了這兩個(gè)重要的基本概念，但當(dāng)時(shí)還處在邊學(xué)習(xí)邊摸索的階段，所以現(xiàn)在覺得那時(shí)給出的上下文和解釋不夠（我舉了一個(gè)媒體查詢的例子，卻沒有定義媒體查詢、也沒有交待媒體查詢的用途！）本文試圖彌補(bǔ)一些缺憾。
| 我不僅認(rèn)為這些技術(shù)代表著Web開發(fā)的現(xiàn)在和未來，還代表著從事跨瀏覽器、跨平臺(tái)移動(dòng)設(shè)備用戶界面開發(fā)的一種方式。是的，你沒有聽錯(cuò)。這些技術(shù)頭一次讓人們有可能從事真正的跨瀏覽器、跨平臺(tái)移動(dòng)Web開發(fā)。這是一些背景。 |
上面這番話沒錯(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í)不同的編程語言和集成開發(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è)類別。如果你不需要訪問設(shè)備的原生功能，就可以只用HTML5和CSS3來構(gòu)建一個(gè)“純粹”的移動(dòng)Web應(yīng)用程序。但是這種情況并不多見。這種類型的應(yīng)用程序在充分利用那些設(shè)備上的原生傳感器和API方面本領(lǐng)有限。雖然一些功能（如地理位置）提供給了移動(dòng)瀏覽器，但還是有許多功能并沒有提供，比如方向感應(yīng)器或視頻。不過好消息是，大行其道的Web編程讓HTML5、JavaScript和CSS能夠在某種程度上“走原生道路”。PhoneGap和Titanium Appcelerator等流行的框架讓你能夠使用HTML5和JavaScript，為iOS、Android和Windows Phone開發(fā)原生應(yīng)用程序，另外還可以訪問設(shè)備。因而，“Hybrid App”隨之出現(xiàn)。
我談?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)行起來更像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è)你的頁面寬度是980px。如果你想為iPhone和尺寸比較小的BlackBerry設(shè)備進(jìn)行移動(dòng)Web開發(fā)，就得讓Mobile Safari（或面向BlackBerry的Ripple）知道這一點(diǎn)，為此需要把視圖元標(biāo)簽添加到HTML文檔中根據(jù)設(shè)備寬度來設(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ì)介紹了媒體查詢；不過大體意思是，它們是一種可以評(píng)價(jià)為真或假的CSS表達(dá)式。如果是真，就會(huì)運(yùn)用表達(dá)式的CSS選擇器和屬性。如果與CSS級(jí)聯(lián)規(guī)則結(jié)合使用，它讓你能夠響應(yīng)不同的分辨率、方向或者分辨率或方向的變化。這個(gè)規(guī)則實(shí)際上是說“對(duì)設(shè)備最大寬度是480px的移動(dòng)設(shè)備來說，就運(yùn)用iPhone樣式表。”
同樣，這篇博文只是觸及了這整個(gè)方面的皮毛，但愿彌補(bǔ)了一些缺憾，并且闡述了視口和媒體查詢，這是用HTML5、JavaScript和CSS3來構(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譯者！】
