移動平臺前端開發(fā)總結(jié)

移動平臺前端開發(fā)是指針對高端智能手機（如Iphone、Android）做站點適配也就是WebApp，并非是針對普通手機開發(fā)Wap2.0，所以在閱讀本篇文章以前，你需要對webkit內(nèi)核的瀏覽器有一定的了解，需要對HTML5和CSS3有一定的了解。

1、首先我們來看看webkit內(nèi)核中的一些私有的meta標(biāo)簽，這些meta標(biāo)簽在開發(fā)webapp時起到非常重要的作用

(1)

(2)

(3)(4)

第一個meta標(biāo)簽表示：強制讓文檔的寬度與設(shè)備的寬度保持1:1，并且文檔最大的寬度比例是1.0，且不允許用戶點擊屏幕放大瀏覽；尤其要注意的是content里多個屬性的設(shè)置一定要用分號+空格來隔開，如果不規(guī)范將不會起作用。

第二個meta標(biāo)簽是iphone設(shè)備中的safari私有meta標(biāo)簽，它表示：允許全屏模式瀏覽；第三個meta標(biāo)簽也是iphone的私有標(biāo)簽，它指定的iphone中safari頂端的狀態(tài)條的樣式；第四個meta標(biāo)簽表示：告訴設(shè)備忽略將頁面中的數(shù)字識別為電話號碼2、如何去除Android平臺中對郵箱地址的識別

看過iOSwebappAPI的同學(xué)都知道iOS提供了一個meta標(biāo)簽:用于禁用iOS對頁面中電話號碼的自動識別。在iOS中是不自動識別郵件地址的，但在Android平臺，它會自動檢測郵件地址，當(dāng)用戶touch到這個郵件地址時，Android會彈出一個框提示用戶發(fā)送郵件，如果你不想Android自動識別頁面中的郵件地址，你不妨加上這樣一句meta標(biāo)簽在head中

3、如何去除iOS和Android中的輸入URL的控件條

你的老板或者PD或者交互設(shè)計師可能會要求你：能否讓我們的webapp更加像nativeapp，我不想讓用戶看見那個輸入url的控件條？

答案是可以做到的。我們可以利用一句簡單的javascript代碼來實現(xiàn)這個效果

setTimeout(scrollTo,0,0,0);

請注意，這句代碼必須放在window.onload里才能夠正常的工作，而且你的當(dāng)前文檔的內(nèi)容高度必須是高于窗口的高度時，這句代碼才能有效的執(zhí)行。4、如何禁止用戶旋轉(zhuǎn)設(shè)備

我曾經(jīng)也想禁止用戶旋轉(zhuǎn)設(shè)備，也想實現(xiàn)像某些客戶端那樣：只能在肖像模式或景觀模式下才能正常運行。但現(xiàn)在我可以很負(fù)責(zé)任的告訴你：別想了!在移動版的webkit中做不到！

至少ApplewebappAPI已經(jīng)說到了：我們?yōu)榱俗層脩粼趕afari中正常的瀏覽網(wǎng)頁，我們必須保證用戶的設(shè)備處于任何一個方位時，safari都能夠正常的顯示網(wǎng)頁內(nèi)容（也就是自適應(yīng)），所以我們禁止開發(fā)者阻止瀏覽器的orientationchange事件，看來蘋果公司的出發(fā)點是正確的，蘋果確實不是一般的蘋果。iOS已經(jīng)禁止開發(fā)者阻止orientationchange事件，那Android呢？對不起，我沒有找到任何資料說Android禁止開發(fā)者阻止瀏覽器orientationchange事件，但是在Android平臺，確實也是阻止不了的。5、如何檢測用戶是通過主屏啟動你的webapp

看過ApplewebappAPI的同學(xué)都知道iOS為safari提供了一個將當(dāng)前頁面添加主屏的功能，按下iphone\\ipod\\ipodtouch底部工具中的小加號，或者ipad頂部左側(cè)的小加號，就可以將當(dāng)前的頁面添加到設(shè)備的主屏，在設(shè)備的主屏?xí)�自動增加一個當(dāng)前頁面的啟動圖標(biāo)，點擊該啟動圖標(biāo)就可以快速、便捷的啟動你的webapp。從主屏啟動的webapp和瀏覽器訪問你的webapp最大的區(qū)別是它清除了瀏覽器上方和下方的工具條，這樣你的webapp就更加像是nativeapp了，還有一個區(qū)別是window對像中的navigator子對象的一個standalone屬性。iOS中瀏覽器直接訪問站點時，navigator.standalone為false,從主屏啟動webapp時，navigator.standalone為true，我們可以通過navigator.standalone這個屬性獲知用戶當(dāng)前是否是從主屏訪問我們的webapp的。在Android中從來沒有添加到主屏這回事！6、如何關(guān)閉iOS中鍵盤自動大寫

我們知道在iOS中，當(dāng)虛擬鍵盤彈出時，默認(rèn)情況下鍵盤是開啟首字母大寫的功能的，根據(jù)某些業(yè)務(wù)場景，可能我們需要關(guān)閉這個功能，移動版本webkit為input元素提供了autocapitalize屬性，通過指定autocapitalize=”off”來關(guān)閉鍵盤默認(rèn)首字母大寫。

擴展閱讀：針對移動終端的Web App前端開發(fā)

手機移動應(yīng)用|APP應(yīng)用開發(fā)愛布斯APP制作平臺

針對移動終端的WebApp前端開發(fā)

據(jù)201*年VisionMoblie開發(fā)者經(jīng)濟學(xué)報告顯示，如果移動Web視作新的開發(fā)平臺，那么它僅次于Android和iOS成為最受開發(fā)者青睞的第三大平臺。特別是HTML5技術(shù)的飛速發(fā)展不斷涌現(xiàn)的各種創(chuàng)新產(chǎn)品和工具，F(xiàn)acebook推出斯巴達(dá)項目、Adobe收購PhoneGap等重大動作，無不吸引眾多開發(fā)者投入。

一個被業(yè)界廣泛關(guān)注的問題是：“移動Web會否在不久的未來重現(xiàn)在PC端上最終成為主流的的發(fā)展趨勢？”10月13日晚上，在CMDN移動開發(fā)者俱樂部第六期活動，當(dāng)當(dāng)網(wǎng)前端工程師柴春燕分享了他的思考和實踐心得。演講實錄如下：

當(dāng)當(dāng)網(wǎng)Web前端工程師柴春燕

非常高興今天晚上在這里跟大家分享移動終端使用HTML5技術(shù)做了一些實踐。對于移動終端目前開發(fā)方式無非就兩種，其中一種就是HTML5的解決方案。如果采用HTML5的話它的Fxs（音譯）就在前端。移動互聯(lián)網(wǎng)及其現(xiàn)狀

前面劉鐵鋒講的是把PC都包含進去，我講的就是針對移動互聯(lián)網(wǎng)，針對移動終端，常見像智能機、上網(wǎng)本、移動終端可以訪問網(wǎng)絡(luò)的設(shè)備，它的可以實現(xiàn)的一些方式。第二是在移動

移動互聯(lián)網(wǎng)營銷：廣州網(wǎng)站建設(shè)：小草壩天麻：

手機移動應(yīng)用|APP應(yīng)用開發(fā)愛布斯APP制作平臺

互聯(lián)網(wǎng)MobileWebApp開發(fā)的時候可能會遇到的一些問題。還有HTML5適合MobileWebApp開發(fā)的特性。這是我開發(fā)MobileWebApp的心得跟大家分享。

之前互聯(lián)網(wǎng)消費調(diào)查中心做了一個研究，手機上網(wǎng)在生活中重要性比例，他所占據(jù)份額會越來越高。另外這個統(tǒng)計調(diào)查在201*年底，一半美國人都會使用智能手機，201*年預(yù)計移動互聯(lián)網(wǎng)用戶超過10億，2020年HTML5這種方案已經(jīng)確定了。截止到201*年6月底，中國的三大運營商智能機份額已經(jīng)超過8千萬。這個趨勢隨著3G互聯(lián)網(wǎng)方面會越來越大。移動互聯(lián)網(wǎng)是指什么？官方解釋就是將移動通信和互聯(lián)網(wǎng)兩者結(jié)合，用戶借助移動終端包括手機、平板、PDA、上網(wǎng)本等，通過網(wǎng)絡(luò)訪問互聯(lián)網(wǎng)。大家如果做過移動開發(fā)的話，最開始如果想用手機訪問互聯(lián)網(wǎng)的話，從幾個階段過渡過來，一個是WML方式，Web1.0，還有Web2.0。

移動互聯(lián)網(wǎng)使用的關(guān)鍵技術(shù)

第一是Web2.0技術(shù)。在移動互聯(lián)網(wǎng)的時候，MobileWebApp的時候以Web2.0為基礎(chǔ)，利用集體智慧，數(shù)據(jù)驅(qū)動，帶來較豐富的體驗。iOS操作系統(tǒng)誕生，從本質(zhì)來說其實帶來顛覆性是用戶體驗上的一些更新。后面我會講到為什么移動設(shè)備有很多局限性，包括大家在做移動開發(fā)的時候都會遇到兼容性的問題。

第二是云計算像超大規(guī)模、高可擴展性、高可靠性和相對廉價。移動互聯(lián)網(wǎng)開發(fā)面臨問題

第一個是設(shè)備。你拿到手機終端，相比PC端瀏覽器運算處理速度都有很大差距。內(nèi)存小，電池續(xù)航能力差，屏幕不統(tǒng)一。針對哪種終端設(shè)備做適配，比你做PC端前端開發(fā)所遇到的困難還要大。

第二個是開發(fā)，多種不同手機操作系統(tǒng)，每一種操作體驗不一樣，相應(yīng)應(yīng)用開發(fā)環(huán)境也是不同。像iPhone的IOS操作系統(tǒng)，是使用WebKet（音譯）為核心。兩種版本兼容Webket，具體對HTML5支持力度是不一樣的。大家可以看到這個官方站點就可以看到，能夠支持多點觸控。像WindowsPhone是采用IE為內(nèi)核。三者操作起來也不一樣，iPhone硬件只有一個Hom鍵，Android是軟硬件結(jié)合一個實體，返回可以通過硬件操作。如果你把所有操作、用戶體驗都放到一個里面看的話，他是有差異的。這是我們做WebApp的時候都必須要考慮的一些問題。

第三是網(wǎng)絡(luò)，這是大家無法回避的一個地方。為什么在HTML5出現(xiàn)之后大家會這么狂熱，會覺得他是一個趨勢。目前雖然中國現(xiàn)在有3G，他的覆蓋面并不是達(dá)到處處都可以擁有3G網(wǎng)絡(luò)，它的流量費用也并不是人人都可以承擔(dān)的地步。像網(wǎng)絡(luò)穩(wěn)定性上面都還是有一些問題的。比如你在坐地鐵的時候，可能到朝陽門的時候還有信號，走到建國門信號就沒有

移動互聯(lián)網(wǎng)營銷：廣州網(wǎng)站建設(shè)：小草壩天麻：

手機移動應(yīng)用|APP應(yīng)用開發(fā)愛布斯APP制作平臺

了。這種情況下用原聲還好解決，如果使用網(wǎng)頁形式訪問的話，如果沒有做到APP方式，基本處于假死或者是掉線狀態(tài)，無法進行第二次訪問，這對用戶體驗是很大的問題。HTML5適合MobileWebApp開發(fā)的特性

這些是一個不完全包括的HTML5的集合，這里面我只是羅列出來，我這里說明一下，我覺得HTML5本身也是草案，我也是在一個學(xué)習(xí)過程中。

第一是語義化。你做MobileWebApp，他本質(zhì)還是希望以后把PC端搜索引擎，都可以用到移動端。當(dāng)用戶通過手機搜索某些東西的時候，可以直接定位到MobileWebApp這種站點，更好的用戶體驗。百度框計算，現(xiàn)在都有這種功能。

第二是新的表單功能。之前做表單功能的時候可能常見的像Canvas，像移動端驗證肯定是必須的，像這個鍵盤是不容忽視的問題，你的手指相比你的移動設(shè)備還是很大的。這個情況下如何更好帶來用戶輸入上的體驗，支持瀏覽器都有對HTML5的一些幫助。我們有對于E-Mail的，軟鍵盤都有調(diào)用方式，郵件的話鍵盤就增加一個@符號。還有Canvas像一些對圖片旋轉(zhuǎn)是可以原聲支持，像手機處理性能會越來越高，手機有這樣的提升。做這種技術(shù)儲備，后面都有一些長足的用處。

第四講到視頻和音頻，嵌入音頻和視頻和文字排版布局的時候，相當(dāng)麻煩，你要把所有音頻視頻文本作為獨立資源去集合起來，如果采用HTML5的方式的話就非常簡單。他和你普通

移動互聯(lián)網(wǎng)營銷：廣州網(wǎng)站建設(shè)：小草壩天麻：

手機移動應(yīng)用|APP應(yīng)用開發(fā)愛布斯APP制作平臺

做頁面沒有輔助差別，可以輔助與CSS，包括CSS3這種方式，可以輕松實現(xiàn)這種布局方式。WebWorker是一個草案，只是一個工具。具體項目里面沒有用到。剩下地理位置信息，是HTML5原聲支持，為什么說像HTML5使用一些場景都會像導(dǎo)航類、地圖類都會用到地理位置信息。傳統(tǒng)的話谷歌地圖，大家獲得地圖信息，不是所有地圖軟件包獲取下來，可以實施地理位置定位。移動區(qū)別PC端，因為他就是移動�？梢詳U展出很多，在實際項目應(yīng)用中就會遇到這樣的，我們所有的商品都會有區(qū)域購買，他在什么地區(qū)可以購買，什么地區(qū)他是沒有配貨。這種情況下如果用地理位置信息他就非常方便。因為我可以檢測到如果他購買的用戶是來自于本地的話，我可以首先獲取它的地理位置，告訴他聯(lián)網(wǎng)請求后臺服務(wù)，看他是否有貨。他其實就是利用地理位置信息一個功能。剩下這個就是本地存儲和離線功能，這是我們做WebApp的一個源動力。像這個功能才能夠支持我們?nèi)ジ�好帶來這種用戶體驗，我們可以把一些資源緩存到本地�？梢园延脩魻顟B(tài)緩存到本地，這個地方也是需要注意的一個地方，就是安全性問題。你像用戶比較核心的一些信心是不建議保存到本地的。但是有一些信心可以用到這些功能，比如在項目中可能會用到搜索，原來大家可能會常用這種搜索推薦。我如果搜索一次，下次還是搜索這個怎么辦，我可以使用本地搜索功能，我直接把他放到本地，下次直接讀取歷史記錄，這個跟原生沒有差別。另外就是離線功能，金融時報FT這個站點，他其實都用了離線功能，把所需要資源優(yōu)先獲取到本地，然后這樣子，當(dāng)用戶在沒有網(wǎng)絡(luò)的情況下，我可以把有一些資源呈現(xiàn)給用戶。然后又可以再去請求服務(wù)器端，同時像這種離線功能還有一些Gmail還有新浪微博都有這些應(yīng)用在里面。我發(fā)帖子也是一樣，把先在發(fā)帖時候的信息先緩存到本地，然后再把他發(fā)送到服務(wù)器端。WebSocket，雖然現(xiàn)在也是草案，目前各瀏覽器支持力度還是比較好的。這在實際項目中可能會用到，我覺得就是像這些新特性，像HTML5提供了相當(dāng)相當(dāng)多的全新API，是原來沒有嘗試過的。有些地方像OA這種，如果采用傳統(tǒng)這種方式，像這種HTTP這種是無狀態(tài)的，這種情況下怎么辦，可以通過WebSocket方式。這是從網(wǎng)上找到，如果你去開發(fā)，他有一些底層框架在上面的。

HTML5在開發(fā)移動應(yīng)用方面有哪些優(yōu)勢呢？

第一是跨平臺。如果公司比較小，你如果要去開發(fā)一套針對iPhone版本，再針對一套Android版本，Android目前有高中低三種版本，每一種版本去做適配有四個版本，兩套代碼。你開發(fā)需要兩套成本，然后運營。我們通過MobileWebApp的方式，開發(fā)成本低于你這種本地應(yīng)用，在不同操作系統(tǒng)上可以帶來近乎一致這種用戶體驗。因為他其實還是一種Web方式去展現(xiàn)。

第二是他基于Web技術(shù)。它有成熟社區(qū)，Web開發(fā)人員很容易遷移到像移動互聯(lián)網(wǎng)開發(fā)上面去。

第三個是易用部署。這是后面我在開發(fā)中發(fā)現(xiàn)他其實真的有很大差異的地方。我們用傳統(tǒng)方式去開發(fā)APP這種應(yīng)用的時候，我要做一個廣告位，像原生這種方式，我更新一個版本，

移動互聯(lián)網(wǎng)營銷：廣州網(wǎng)站建設(shè)：小草壩天麻：

手機移動應(yīng)用|APP應(yīng)用開發(fā)愛布斯APP制作平臺

通過他的用戶去下載。更新一個版本的話，你必須把每個系統(tǒng)都做一次更新升級，這個帶來部署和維護上面一些成本。采用這種MobileWebApp方式，可以實現(xiàn)持續(xù)更新。HTML5開發(fā)移動應(yīng)用的注意事項

第一智能手機市場占有率。針對對比一下這種HTML5開發(fā)移動應(yīng)用注意事項，智能手機市場占有率沒有達(dá)到人手一部，雖然智能機在8000萬，但是中國13億人，沒有做到人人一部。我們公司做的統(tǒng)計，移動端，Symbian操作系統(tǒng)還是占45%份額以上，訪問量還是比較大的。

第二是移動設(shè)備瀏覽器對HTML5的支持并沒有像桌面版本那么全面。每個移動瀏覽器，目前市面上見到的IE的Mobile版本，包括目前出來的QQ瀏覽器、遨游、海豚瀏覽器，各個移動設(shè)備瀏覽器對HTML5支持都是不一樣的。像HTML5開發(fā)WebApp方式，最成功案例永遠(yuǎn)是出現(xiàn)在iPhone上面，出現(xiàn)在iOS操作系統(tǒng)上面，會做他的兼容和適配。第三是不同瀏覽器間的兼容性問題。移動端的瀏覽器不比PC端他要差一些。適合采用MobileWebApp方式的場景

我自己總結(jié)一下適合采用MobileWebApp方式的場景，所有都是我在自己不斷學(xué)習(xí)過程的一個總結(jié)，并不是一個權(quán)威的觀點，只是拿出來和大家分享。我覺得MobileWebApp基本上都是基于信息流的，什么叫做信息流的？這種應(yīng)用都是由后臺服務(wù)器推送過來。打個比方，我們看到新聞類，iOS、Android支持兩種，一個是JSL，一個是HTML。有兩條產(chǎn)品線做iPhone和Android產(chǎn)品線，采用MobileWebApp的方式，我可以完全做到直接去存儲數(shù)據(jù)庫就可以。我做一套API提供給客戶端。

第一個是微博，另外是社交新聞類，地圖和導(dǎo)航類，他采用就是按需下載，能夠帶來客戶更多流量上的節(jié)省和體驗上的提升�；�于這個基礎(chǔ)之上可以做更多的分享，像切客這種功能。一個是商品列表、一個是商品詳情，點進去之后就是購物流程。信息展示類，他是非常適合用MobileWebApp的方式做的。

后面我想展示一些成功的站點，比如說谷歌Plass（音），還愛百度小說都是采用MobileWebApp方式做的。還有像淘寶。像列表展示，其實內(nèi)部嵌這個都是Webwell（音），他們做HTML5然后去實現(xiàn)的。這個圖登錄和注冊功能，完全可以使用HTML5表單功能，去做記住密碼，你去校驗用戶輸入。還有第三方框架，有學(xué)習(xí)和參考的地方，第一是iUI，還有JQtouch，

MobileWebApp開發(fā)心得

移動互聯(lián)網(wǎng)營銷：廣州網(wǎng)站建設(shè)：小草壩天麻：

手機移動應(yīng)用|APP應(yīng)用開發(fā)愛布斯APP制作平臺

第一要創(chuàng)新。HTML5提供了很多原來你不曾想象的一些功能點，你可以去參考iPhone和IOS操作體驗。你去看像這種HTML5官方站點提供Demo（音），你想這些功能可能會用到什么地方。你可以去判斷這個商品是否是區(qū)域購買，你針對具體應(yīng)用場景，完全可以做到你的實際項目里邊。

第二是安全性。并不是這個技術(shù)一定要用到這個項目里邊去，你要考慮是這個場景，我做的Android應(yīng)用的時候其實只是考慮到為了實現(xiàn)這樣的功能，比如說記住密碼。我們可以由其他替代方案，并不是一定要采用為了技術(shù)而技術(shù)，我們用戶需求是第一位的。

第三是規(guī)范。HTML5本身是草案，每個公司做MobileWebApp的時候，都沒有一套完整的體系，不像之前做開發(fā)的時候前端會給你開發(fā)，像HTML5跟CSS3結(jié)合，做MobileWebApp這種，WebApp的方式的話更多可能會在交互，還有就是樣式，配置等等，你要精確到細(xì)節(jié)，比你原來做前端，具體到細(xì)節(jié)更加要規(guī)范一些。

移動互聯(lián)網(wǎng)營銷：廣州網(wǎng)站建設(shè)：小草壩天麻：

友情提示：本文中關(guān)于《移動平臺前端開發(fā)總結(jié)》給出的范例僅供您參考拓展思維使用，移動平臺前端開發(fā)總結(jié)：該篇文章建議您自主創(chuàng)作。

來源：網(wǎng)絡(luò)整理 免責(zé)聲明：本文僅限學(xué)習(xí)分享，如產(chǎn)生版權(quán)問題，請聯(lián)系我們及時刪除。

《移動平臺前端開發(fā)總結(jié)》由互聯(lián)網(wǎng)用戶整理提供,轉(zhuǎn)載分享請保留原作者信息,謝謝!
鏈接地址：http://www.7334dd.com/gongwen/626231.html

• 上一篇：實施工程師總結(jié)論文-王思錦
• 下一篇：web程序設(shè)計(JSP)課程設(shè)計總結(jié)