移動開發規範

從別人家整來的，學習瞭解中。

 

1.字體設置：

使用無襯線字體。

 

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

3 } 

 

iOS 4.0+ 使用英文字體 Helvetica Neue，以前的iOS版本降級使用 Helvetica。中文字體設置爲華文黑體STHeiTi。 需補充說明，華文黑體並不存在iOS的字體庫中( http://support.apple.com/kb/HT5878 )， 但系統會自動將華文黑體 STHeiTi 兼容命中系統默認中文字體黑體-簡或黑體-繁

 

 1 Heiti SC Light 黑體-簡 細體 （iOS 7後廢棄）

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

 

原生Android下中文字體與英文字體都選擇默認的無襯線字體

 

1 4.0 以前版本英文字體原生 Android 使用的是 Droid Sans，中文字體原生 Android 會命中 Droid Sans Fallback
2 4.0 以後中英文字體都會使用原生 Android 新的 Roboto 字體
3 其餘第三方 Android 系統也一致選擇默認的無襯線字體

 

  

2.基礎交互：

設置全局的CSS樣式，避免圖中的長按彈出菜單與選中文本的行爲

1 a, img {
2     -webkit-touch-callout: none;  /*  禁止長按連接與圖片彈出菜單  */
3 }
4 html, body {
5     -webkit-user- select: none;    /*  禁止選中文本（如無文本選中需求，此爲必選項）  */
6     user- select: none;

7 } 

 

 

3.移動性能：

 

 

要考慮Android低端機與2G網絡場景下性能 注意！

 

發佈前必要檢查項

• 全部圖片必須有進行過壓縮
• 考慮適度的有損壓縮，如轉化爲80%質量的jpg圖片
• 考慮把大圖切成多張小圖，常見在banner圖過大的場景

加載性能優化, 達到打開足夠快

• 數據離線化，考慮將數據緩存在 localStorage
• 初始請求資源數 < 4 注意！
• 圖片使用CSS Sprites 或 DataURI
• 外鏈 CSS 中避免 @import 引入
• 考慮內嵌小型的靜態資源內容
• 初始請求資源gzip後整體積 < 50kb
• 靜態資源(HTML/CSS/JS/Image)是否優化壓縮？
• 避免打包大型類庫
• 確保接入層已開啓Gzip壓縮（考慮提高Gzip級別，使用CPU開銷換取加載時間） 注意！
• 儘可能使用CSS3代替圖片
• 初始首屏以外的靜態資源（JS/CSS）延遲加載 注意！
• 初始首屏以外的圖片資源按需加載（判斷可視區域） 注意！
• 單頁面應用(SPA)考慮延遲加載非首屏業務模塊
• 開啓Keep-Alive鏈路複用

運行性能優化, 達到操做足夠流暢

• 避免 iOS 300+ms 點擊延時問題 注意！
• 緩存 DOM 選擇與計算
• 避免觸發頁面重繪的操做
• Debounce連續觸發的事件(scroll / resize / touchmove等)，避免高頻繁觸發執行 注意！
• 儘量使用事件代理，避免批量綁定事件
• 使用CSS3動畫代替JS動畫
• 避免在低端機上使用大量CSS3漸變陰影效果，可考慮降級效果來提高流暢度
• HTML結構層級保持足夠簡單
• 盡能少的使用CSS高級選擇器與通配選擇器
• Keep it simple

在線性能檢測評定工具使用指南

• 訪問 Google PageSpeed 在線評定網站
• 在地址欄輸入目標URL地址，點擊分析按鈕開始檢測
• 按 PageSpeed 分析出的建議進行優化，優先解決紅色類別的問題

 

推薦閱讀

• 移動WEB性能
• 優化WEB緩存
• 最小化RTT次數
• 最小化請求負載
• 優化瀏覽器渲染

 

 

源：http://alloyteam.github.io/Spirit/modules/Standard/