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

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

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

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

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

　　為什么不用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è)度。WAP端網(wǎng)址制作任何使用手機和互聯(lián)網(wǎng)的用戶都可能成為傳播者CSS3的渲染要比CSS2渲染性能低上很多，特別是CSS3動畫，基本上是電量殺手，如果要用，建議縮小展示區(qū)域。使用CSS3的時候要在視覺和性能找一個平衡點，不過一般情況下都是視覺優(yōu)先，因為去TM的電量，這關屌絲開發(fā)者啥事???

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

　　好了，今天小編就講到這里，如果您還有其他關于網(wǎng)站建設類的問題歡迎隨時來電或者留言。應客網(wǎng)專業(yè)從事網(wǎng)站建設與推廣多年，經驗豐富。