記錄一下最近開發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庫，這麼大的庫也挺愁人的..

 

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