眾所周知，所謂的觸屏版網(wǎng)站其實(shí)也是WebApp的一種展示形式，主要是依賴HTML+CSS+Javascript這三個(gè)關(guān)鍵因素來實(shí)現(xiàn)，相比較原生客戶端程序來說優(yōu)點(diǎn)就是開發(fā)周期短、升級簡單、維護(hù)成本低,因?yàn)閺母旧蟻碚fWebApp的本質(zhì)就是一個(gè)網(wǎng)站而已。這里就說一下如何開發(fā)一個(gè)適合在觸屏設(shè)備上展示的頁面.

如果有在PC端開發(fā)網(wǎng)頁的基礎(chǔ)那么去處理手機(jī)端就很容易上手,這里介紹的是針對手持設(shè)備專門處理的頁面,而不是媒體查詢那種展示方式.

這里提供幾個(gè)meta屬性

使頁面不可以認(rèn)為放大縮小,喜歡用手指捏來捏去的童鞋要失望了.

使網(wǎng)站開啟對web app程序的支持

在web app應(yīng)用下狀態(tài)條(屏幕頂部條)的顏色;

設(shè)置web app的放置主屏幕上icon文件路徑,IOS系統(tǒng)添加到主屏幕那個(gè)圖標(biāo),圖片尺寸可以設(shè)定為57*57(px)或者Retina可以定為114*114(px)，ipad尺寸為72*72(px)

類似原生程序的啟動畫面,IOS有效,需把web app保存到桌面屏幕打開.

禁止一串?dāng)?shù)字變?yōu)榭蓳艽蛱柎a

以上是常用的一些meta標(biāo)簽,應(yīng)該可以滿足大部分需求.

HTML:

如果是針對IOS或者高版本的android,HTML5是一個(gè)很不錯(cuò)的方案,如果需求需要支持一些山寨屌絲雞,我的建議是不要使用太多HTML5的標(biāo)簽和API,屌絲不是屌絲可以控制的,所以作為一個(gè)屌絲開發(fā)者自然要做一個(gè)穩(wěn)重的屌絲.

HTML5的屬性還是很好用的,placeholder就是其中一個(gè).

CSS:

現(xiàn)在你拋棄了IE,甚至拋棄了火狐,此刻你的心情一定又驚又喜.可以輕松的勾畫出陰影和漸變,甚至可以使用可愛的css3動畫.經(jīng)測試在IOS下CSS3的渲染都非常給力,在一些中端安卓機(jī)型上CSS3的渲染有些偏差,CSS3動畫明顯不夠流暢,這時(shí)候有兩種解決方案,一種是平穩(wěn)退化,一種是漸進(jìn)增強(qiáng),如何選擇還得依照項(xiàng)目需求來定.

建議不要使用太多的CSS3效果,CSS3的渲染比較耗電,也會對性能造成一定的影響.

Javascript:

你仍然可以選擇在PC端使用的jQuery庫來從事手機(jī)端的頁面開發(fā)，這不會造成太多硬性，但這里推薦使用一個(gè)叫zepto的小庫來實(shí)現(xiàn)基本功能，麻雀雖小，雞雞俱全。

為什么不用jQuery Mobile?理由很簡單，我需要一款白色時(shí)尚的鼠標(biāo)，而你卻買了一臺MAC，鼠標(biāo)我得到了，但是電腦和鍵盤我并不需要，這又是何必呢。

那我想用sencha touch?如果只是想做一個(gè)開發(fā)周期短、升級簡單、維護(hù)成本低的純web app，那就不建議使用ST，學(xué)習(xí)ST的時(shí)間都可以開發(fā)很多頁面了。

要注意的是觸屏的方法，jQuery沒有提供bind(“swipe”)這樣的方法，甚至jQuery Mobile提供的”swipe”方法竟然是那么戳，所以這里建議還是能自己按照提供的ontouchstart, ontouchmove, ontouchend三個(gè)事件來寫一些類似PC端上的滾動效果,萬變而不離其腦子。

性能：

這才是手機(jī)版的重頭戲，在PC端因?yàn)橛布膹?qiáng)大和沒有電量這個(gè)概念所有很容易忽視性能這個(gè)問題，在手機(jī)端性能問題被無限放大。

精簡DOM結(jié)構(gòu)，手機(jī)版的頁面一般不會很復(fù)雜，用心篩選一定能篩選出很多通用的模塊，這不但對整個(gè)項(xiàng)目有利，而且對性能也有很大的提升。

CSS3不是萬能的，它只是一個(gè)工具，就像PS一樣，有時(shí)候我們使用美圖XX之類的軟件就可以了，不必使用PS以顯示自己的專業(yè)度。CSS3的渲染要比CSS2渲染性能低上很多，特別是CSS3動畫，基本上是電量殺手，如果要用，建議縮小展示區(qū)域。使用CSS3的時(shí)候要在視覺和性能找一個(gè)平衡點(diǎn)，不過一般情況下都是視覺優(yōu)先，因?yàn)槿M的電量，這關(guān)屌絲開發(fā)者啥事???

javascript是性能攔路虎，頁面載入性能大多都卡在這里，合理的閉包，優(yōu)秀的代碼設(shè)計(jì)模式會化成一道彩色閃電亮瞎用戶的手機(jī)屏幕，具體這里無法說的很詳細(xì)，總之多測試就對了。

當(dāng)前文章：WebApp觸屏版網(wǎng)站開發(fā)有哪些要點(diǎn)？
分享URL：http://jinyejixie.com/news/135521.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、定制網(wǎng)站、域名注冊、App開發(fā)、移動網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)