WebApp觸屏版網站開發(fā)有哪些要點？

眾所周知，所謂的觸屏版網站其實也是WebApp的一種展示形式，主要是依賴HTML+CSS+Javascript這三個關鍵因素來實現，相比較原生客戶端程序來說優(yōu)點就是開發(fā)周期短、升級簡單、維護成本低,因為從根本上來說WebApp的本質就是一個網站而已。這里就說一下如何開發(fā)一個適合在觸屏設備上展示的頁面.

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

這里提供幾個meta屬性

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

使網站開啟對web app程序的支持

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

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

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

禁止一串數字變?yōu)榭蓳艽蛱柎a

以上是常用的一些meta標簽,應該可以滿足大部分需求.

HTML:

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

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

CSS:

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

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

Javascript:

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

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

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

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

性能：

這才是手機版的重頭戲，在PC端因為硬件的強大和沒有電量這個概念所有很容易忽視性能這個問題，在手機端性能問題被無限放大。

精簡DOM結構，手機版的頁面一般不會很復雜，用心篩選一定能篩選出很多通用的模塊，這不但對整個項目有利，而且對性能也有很大的提升。

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

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

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

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

廣告

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