移動端網頁設計經驗與心得
智能手機發展確實很迅速，像今年，我的大部分工作就都在移動端網頁上。
再往前些年，看到的手機版/移動版網頁，限制於瀏覽器與手機性能，2g網絡速度等
網頁設計無非是藍、黑、白，界面單調，並且要盡可能的設計簡單。
現在情況就大不相同了，軟件上webkit內核瀏覽器大行其道，硬件突飛猛進，網速來說，4g正炒得火熱。
下面就和大家分享一下我的一些移動端網頁設計經驗與心得。
⒈ 分辨率
這應該是移動端網頁最關心的問題了，因為移動設備五花八門，各種分辨率都有。要想在這些設備上都能有良好的瀏覽體驗，得花一番功夫。
- 使用viewport：這已經是移動端網頁的必備了，它可以設定頁面的寬度，是否允許縮放等等。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
一般設置width=device-width，就是設置為設備的屏幕寬度，當然也可以是具體數值
-
百分比與max(min)-width使用：移動端網頁不僅分辨率不一，而且隨時可以橫豎屏切換，所以百分比寬度設定非常必要，再配合max(min)-width限制最大(小)寬度，能有效的適應各種分辨率，若為此還有特別需求，可看下一條，"使用Media Queries"
-
使用Media Queries，這也是響應式web設計的一部分
-
<link rel="stylesheet" type="text/css" href="style1.css" media="screen and (min-width: 640px)">
這裏的意思就是在大於640px的屏幕寬度下，使用style1樣式，也可以寫在樣式內部，如：
@media screen and (min-width: 640px){ .d1{background:#ccc;} }
⒉ 內容與緩存
雖才說到現在4g正炒得火熱，但不可否認移動設備網絡環境上的局限性，所以還是有必要對此做一些處理。
- 使用manifest緩存
<html manifest="/mobile.manifest">
在html上添加manifest，其中文件格式內容如：
CACHE MANIFEST ##需要離線的內容 CACHE: Script/jquery.js Script/gameconfig.js Image/home.png Image/logo.png ##總是訪問網絡的內容 NETWORK: * ##訪問A失敗時訪問B FALLBACK
瀏覽器將緩存chache內所有的內容，並且可以離線訪問，只要文件發生任何改變都將會重新讀取並刷新全部緩存，所以更改註釋是個更新緩存的好方法
這裏要註意的是
1，添加了manifest的當前網頁也會被緩存 所以推薦的方式是頁面緩存，頁面動態內容全部用ajax獲取，所以在移動網站項目設計開始就要註意這個問題
2，頁面中添加iframe 然後子頁面引用manifest想達到緩存資源而不緩存當前頁面內容，是無效的。 - 盡可能使用css樣式來代替圖片，由於移動端瀏覽器對css3的支持，使得以前很多圖片可以用樣式來代替
如我們公司項目內用到的一些，下圖：
按鈕用到了 漸變+圓角+內陰影
.btn_red { display: block; line-height: 28px; padding: 1px 0; border: 1px solid #B81414; border-radius: 2px; background: #FF5A5A; background: -webkit-gradient(linear, 0 0, 0 70%, from(#FF5A5A), to(#FF4444)); overflow: hidden; margin-top: 3px; color: #fff; box-shadow: 0px 1px 1px #FFB5B5 inset; }
三角形 就是用border的顏色，改變顏色可以畫出指向不同方向的三角形
.tip_t{ border-color: transparent transparent #bb0808 transparent; border-style: solid; border-width: 10px; width: 0px; height: 0px; }
箭頭是兩個三角形疊在一起
……
用樣式代替圖片之後不僅大小減少了很多，可維護性更大大提高 -
頁面只展示部分內容，多提示用戶"點擊展開"或者"查看更多"，再異步獲取內容，大家都不希望打開一個網站，流量就嘩嘩沒了
⒊ 布局
手機端可視區域小，布局上不同於傳統網頁，需要充分利用有限的空間去展示信息。
- 頁面流程簡單清晰，復雜的操作盡量分段展示，如下圖：
- 隱藏不常用的功能，可以將其放在側邊欄或彈出層，如下圖：
- 由於移動端是直接用手指操作，而非鼠標。所以，需要響應元素點擊區域要相對明顯，大
- 屏幕寬度雖小，但是上下滑動體驗好，因此布局上可以多上下排列
⒋ 其他與結語
- 許多小廠商的手機平板，還有一些rom上的系統默認瀏覽器版本各異(很頭疼..)，所以測試工作要做足
- html5中<input /> type有好幾種新類型，比如<input type="tel" />，移動端上點擊會默認彈出數字鍵盤，可多試試
移動端網頁設計經驗與心得