以下の規範提案は、すべてAlloyteamが日常の開発プロセスでまとめ上げた経験であり、プロジェクトでの実践実績が良好なため、強く推奨します。

フォント設定

サンセリフフォントを使用する

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

iOS 4.0+ では英字フォントに Helvetica Neue を使用し、それ以前のiOSバージョンでは Helvetica にフォールバックします。中国語フォントは華文黒体STHeiTiに設定します。補足説明が必要ですが、華文黒体はiOSのフォントライブラリには存在しませんhttp://support.apple.com/kb/HT5484?viewlocale=en_US）、ただしシステムは自動的に華文黒体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;
}

user-select

モバイルパフォーマンス

Androidのローエンド端末と2Gネットワーク環境でのパフォーマンスを考慮する必要があります。

リリース前の必須チェック項目

  • すべての画像は圧縮済みである必要があります。
  • 適度な非可逆圧縮を検討してください。例えば、品質80%のJPEG画像に変換するなどです。
  • 大きな画像を複数の小さい画像に分割することを検討してください。バナー画像が過大な場合によくあります。

読み込みパフォーマンスを最適化し、十分に速く開くようにします。

  • データをオフライン化し、localStorageにデータをキャッシュすることを検討してください。
  • 初期リクエストリソース数< 4 注意！
  • 画像はCSS SpritesまたはDATA URIを使用する
  • 外部CSSでは @import による読み込みを避ける
  • 小さな静的リソースの内容をインライン化することを検討する
  • 初期リクエストリソースのgzip後の総容量< 50kb
  • 静的リソース（HTML/CSS/JS/IMAGE）は最適化・圧縮されていますか？
  • 大型のライブラリをバンドルしないようにする
  • アクセス層でGzip圧縮が有効になっていることを確認する
  • 可能な限りCSS3を使用して画像を置き換える
  • 初期ファーストビュー以外の画像リソースは遅延読み込みが必要注意！
  • シングルページアプリケーション（SPA）では、ファーストビュー以外の業務モジュールを遅延ロードすることを検討する

実行パフォーマンスを最適化し、操作が十分にスムーズになるようにする

  • iOSの300+msクリック遅延の問題を回避する注意！
  • DOMの選択と計算をキャッシュする
  • ページの再描画を引き起こす操作を避ける
  • 連続してトリガーされるイベント（scroll/resize）はデバウンスし、高頻度のトリガー実行を避ける
  • 可能な限りイベント委任を使用し、イベントの一括バインドを避ける
  • JSアニメーションの代わりにCSS3アニメーションを使用する
  • ローエンド端末では大量のCSS3グラデーションやシャドウ効果の使用を避け、効果をグレードダウンして滑らかさを向上させることを検討してください。
  • HTML構造の階層は十分にシンプルに保ち、5階層以内を推奨します。
  • CSSの高度なセレクタとワイルドカードセレクタの使用はできるだけ少なくする。
  • Keep it simple

オンラインパフォーマンス検出評価ツールの使用ガイド

  • アクセスGoogle PageSpeedオンライン評価サイト
  • アドレスバーに対象のURLアドレスを入力し、分析ボタンをクリックして検出を開始します。
  • PageSpeed 分析から得られた提案に従って最適化し、赤色カテゴリの問題を優先のに解決します。

出典：http://www.zjgsq.com/1339.html