モバイル 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 がデフォルトの Sans serif フォントとして選択されます

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 画像に変換するなど、適度な非可逆圧縮を検討してください

大きな画像を複数の小さな画像に分割することを検討してくださいこれは、バナー画像が大きすぎる場合によく発生します。 シナリオ

読み込みパフォーマンスが最適化され、十分な速度で開くことができます

データがオフラインであるため、データを localStorage にキャッシュすることを検討してください

最初に要求されたリソースの数

画像には CSS スプライトまたは DATAURI を使用します

外部リンク CSS での @import の導入は避けてください

小さな静的リソース コンテンツの埋め込みを検討してください

リソース gzip の最初のリクエスト後の総量

静的リソース (HTML/CSS/JS /画像) 圧縮を最適化しますか?

大規模なクラス ライブラリのパッケージ化は避けてください

アクセス レイヤで Gzip 圧縮がオンになっていることを確認してください

できる限り画像の代わりに CSS3 を使用してください

最初の最初の画面の外側にある画像リソースは、読み込みに時間がかかる必要があります 注意!

シングル ページ アプリケーション (SPA) では、ファースト スクリーン以外のビジネス モジュールの読み込みの遅延を考慮します

十分にスムーズな操作を実現するために実行パフォーマンスを最適化します

iOS 300+ms のクリック遅延の問題を回避します 注意!

DOM の選択と計算をキャッシュする

ページの再描画をトリガーする操作を避ける

継続的にトリガーされるイベント (スクロール/サイズ変更) をデバウンスして、高頻度でトリガーされる実行を回避する

イベントのバッチ バインディングを回避するために、可能な限りイベント プロキシを使用する

JS アニメーションの代わりに CSS3 アニメーションを使用します

ローエンドのマシンでは CSS3 グラデーション シャドウ効果を多量に使用することは避け、流暢性を向上させるために効果をダウングレードすることを検討してください

HTML 構造レベルは十分に単純にしてください。レベルは 5 つ以下にすることをお勧めします

CSS を使用してくださいできる限り少ない高度なセレクターとワイルドカード セレクター

シンプルにしてください

オンライン パフォーマンス テストおよび評価ツールの使用ガイド

Google PageSpeed オンライン評価 Web サイトにアクセスします

アドレス バーにターゲット URL アドレスを入力し、分析ボタンを押してテストを開始します

PageSpeed 分析を押して、与えられた提案を最適化し、赤いカテゴリの問題を解決することを優先します