記錄一下最近開發web移動前端的過程


兩個項目

第一個是公司網站的移動端,我所在的公司是做某方面的新聞站的。

所以說頁面基本是以一條條的新聞+圖文混排為主,頂部有一個自動slider+觸屏滑動的功能,

使用的是swipe插件,輕量,簡潔非常好用。一看就懂 特別贊。

采用的的是彈性布局

---------------------------------------------------------------------------------

其中記錄了一些兼容方面的css屬性,做過移動端的基本可以跳過: )

1.input,button標簽在iphone下會自動圓角,

這個比較簡單,加一個-webkit-appearance:none;就可解決圓角問題。

 

2.寫代碼的時候經常需要加入padding這個屬性來做,但是如何計算width+padding=?最終寬呢,比較簡單的。

加入以下屬性后,可讓box的寬不受padding的干擾。

舉例:假如寬為20em,左右內邊距各為5em,則最終寬為30em,然而加入此屬性后寬仍為20em。

    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box

 

3.標題文字自適應寬度,超出后為...

既然是彈性布局,那么寬度不一,但行文字又不能限制截取多少個字段,於是我考慮用以下代碼。

寬了就顯示多,窄了就顯示少,顯示不下去就變為...
    width:95%;
    white-space:nowrap;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
    overflow:hidden

 

4.媒體查詢,這個是作為彈性布局最關鍵的一點。

比如我五寸的屏幕,分享的icon我可以看的很清楚,但是在iphone4上用那么大的icon就導致頁面變的笨重了。

還有如果橫屏會發生什么?自己有時間可以試試。

 

5.表單控件模擬,如果你和我一樣是半個設計出家的話..自己做一個點擊前點擊后的,寫個切換的js就搞定了.

要么就上網找模擬控件的包自己引用,摘出來吧 ..

因為默認的表單控件在手機端確實是非常的不好用。要么太小,要么樣子難看,反正我是沒找到優點..放棄它吧..

 

6.最后一點有關用戶體驗的,click與tap。

這一點我承認沒有做好,用click做了效果,導致頁面每次點擊都會有一些延遲,據資料上說是延遲0.3秒,雖然不多,但是確實不怎么友好,

公司主要也不是做手機端,也就屬於能用就行階段,對這個要求不是很嚴格,我也就沒做..(偷懶了..)

tap屬性的話需要用js封裝,因為它不是一個可直接調用的方法,我對JS掌握的也不深,所以就拋棄了它..雖然網上能找到封裝好的代碼吧..

 

這是新聞頁的一些總結,遇到的問題還算比較基礎,做下來還是比較簡單的,有問題找度娘沒錯 ~

最后一套頁面下來一共是 10個html+12個CSS+圖片總共下來是 720kb,壓縮后應該是可以達到700KB的

新聞頁還是比較簡單的,因為不涉及過多的特效,以加載快為主,但是第二個項目就比較苦了..

 

第二個項目是通過微信+公司網站推廣的一個講述宣言的活動,把自己的留言通過微信記錄下來發布到我們這個手機端的頁面。

登錄手機端頁面通過html5來播放,每個頁面要加載10個音頻,不過由於是微信壓縮過的,所以也並不是太大。

但是從技術層面要解決的問題有 :

1.手機端html5技術進行模擬控件,美化控件,保證美觀的同時功能完善。

2.JS控制html5模擬,多個音頻要考慮是否會沖突,失效問題。

3.就是兼容問題了,我自己用JS模擬了一個控件出來,我安卓的挺好用的,但是在iphone上就癱了..於是含淚刪掉自己辛苦攢(沒錯是我cuan出來的..)的JS..

上百度開始尋找解決方法了.. 最后用了據說是微信web版都在使用的第三方控件,拿來后發現確實好用,是開源的一個帖子 html5 mp3插件推薦系列的..

4.新的問題出來了,就是我點擊播放的時候開始加載,如果音頻過長加載過慢,影響用戶體驗,

但如果預加載的話太費流量了..這個我覺得好像解決不了

自己手賤用一首5MB的歌曲模擬了十個控件預加載,忘連公司wifi,結果過了幾秒后彈出提示日流量已超20mb..我趕快給關掉了..

 

現在項目中又有一個頭疼的問題..模擬app做一個底部固定留言塊,瀏覽器垂直滾動也不會發生變化 . 可以輸入文字,安卓是解決了,沒問題,

但是在iphone下一點擊固定的input框,這個框就跑屏幕中間去了,特別難看..整不知道怎么解決呢..而且還引得jquery mobile庫,這么大的庫也挺愁人的..

 

一時半會兒也想不到其他說的了..就先這樣吧.. 沒怎么寫過博客 不知道寫的是否有用 ,還請賜教,哈哈 ~

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM