首頁 > web前端 > css教學 > 行動web開發規格詳細

行動web開發規格詳細

伊谢尔伦
發布: 2016-12-01 09:35:50
原創
1091 人瀏覽過

以下規範建議,皆是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

初始請求資源數 

圖片使用CSS Sprites 或DATAURI

外鏈CSS 中避免@import 引入

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

初始請求資源gzip/HTS/HT IMAGE)是否優化壓縮?

避免打包大型類庫

確保接入層已開啟Gzip壓縮

盡量使用CSS3代替圖片

初始首屏之外的圖片資源需延遲加載 注意!

單頁應用(SPA)考慮延遲加載非首屏業務模組

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

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

快取DOM 選擇與計算

避免觸發頁面重繪的操作

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

盡可能使用事件代理,避免批量綁定事件

CSS3動畫取代JS動畫

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

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

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

Keep it simple

線上效能偵測評估工具使用指南

造訪 Google PageSpeed 線上評定網站

在位址列輸入目標出的建議進行最佳化,優先解決紅色類別的問題

相關標籤:
web
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板