移動web開發規範詳細

以下規範建議，均是Alloyteam在日常開發過程中總結提煉出的經驗，規範具備較好的項目實踐，強烈推薦使用。

字型設定

使用無襯線字型

body { font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; }

iOS 4.0+ 使用英文字型 Helvetica Neue，之前的iOS版本降級使用 Helvetica。中文字型設定為華文黑體STHeiTi。 需補充說明，華文黑體並不存在iOS的字型庫中 但系統會自動將華文黑體STHeiTi相容命中系統預設中文字型黑體-簡或黑體-繁

Heiti SC Light 黑體-簡 細體 Heiti SC Medium 黑體-簡 中黑 Heiti TC Light 黑體-繁 細體 Heiti TC Medium 黑體-繁 中黑

原生Android下中文字型與英文字型都選擇預設的無襯線字型

4.0 之前版本英文字型原生 Android 使用的是 Droid Sans，中文字型原生 Android 會命中 Droid Sans Fallback 4.0 之後中英文字型都會使用原生 Android 新的 Roboto 字型 其他第三方 Android 系統也一致選擇預設的無襯線字型

基礎互動

設定全域的CSS樣式，避免圖中的長按快顯功能表與選中文本的行為

a, img { -webkit-touch-callout: none; /* 禁止長按連結與圖片快顯功能表 */ } html, body { -webkit-user-select: none; /* 禁止選中文本（如無文本選中需求，此為必選項） */ user-select: none; }

移動效能

要考慮Android低端機與2G網路情境下效能

發布前必要檢查項

所有圖片必須有進行過壓縮

考慮適度的有損壓縮，如轉化為80%品質的jpg圖片

考慮把大圖切成多張小圖，常見在banner圖過大的情境

載入效能最佳化，達到開啟足夠快

資料離線化，考慮將資料緩衝在 localStorage

初始請求資源數 < 4 注意！

圖片使用CSS Sprites 或 DATAURI

外鏈 CSS 中避免 @import 引入

考慮內嵌小型的靜態資源內容

初始請求資源gzip後總體積 < 50kb

靜態資源(HTML/CSS/JS/IMAGE)是否最佳化壓縮？

避免打包大型類庫

確保接入層已開啟Gzip壓縮

盡量使用CSS3代替圖片

初始首屏之外的圖片資源需消極式載入 注意！

單頁面應用(SPA)考慮消極式載入非首屏業務模組

運行效能最佳化，達到操作足夠流暢

避免 iOS 300+ms 點擊延時問題 注意！

緩衝 DOM 選擇與計算

避免觸發頁面重繪的操作

Debounce連續觸發的事件(scroll/resize)，避免高頻繁觸發執行

儘可能使用事件代理，避免大量繫結事件

使用CSS3動畫代替JS動畫

避免在低端機上使用大量CSS3漸層陰影製作效果，可考慮降級效果來提升流暢度

HTML結構層級保持足夠簡單，推薦不超過 5 個層級

盡能少的使用CSS進階選取器與通配選取器

Keep it simple

線上效能檢測評定工具使用指南

訪問 Google PageSpeed 線上評定網站

在地址欄輸入目標URL地址，點擊分析按鈕開始檢測

按 PageSpeed 分析出的建議進行最佳化，優先解決紅色類別的問題

