モバイル Web 開発仕様_html/css_WEB-ITnose からの抜粋

フォント設定

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

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

iOS 4.0 以降では英語フォント Helvetica Neue が使用され、以前の iOS バージョンは Helvetica を使用するようにダウングレードされます。中国語フォントは中国語太字 STHEiTi に設定されます。 中国語の黒竜江語は iOS フォント ライブラリ (http://support.apple.com/kb/HT5878) には存在しないことを追加する必要がありますが、システムは自動的に中国語の黒竜江語 STHEiTi をシステムのデフォルトの中国語フォント黒竜江省簡体字と一致させます。またはヘイヘコンプレックス。

• Heiti SC Light 黑体-簡体字中国語 (iOS 7 以降は破棄)
• Heiti SC Medium 黑体-简中黑
• Heiti TC Light 黑体-繁体Body
• Heiti TC Medium Heiti - 繁体字中国語 ブラック

ネイティブ 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 画像に変換するなど、適度な非可逆圧縮を検討してください
• 大きな画像を複数の小さな画像に分割することを検討してください。これは、バナー画像が大きすぎるシナリオで一般的です。これにより、バナー画像をすぐに開くことができるように、読み込みパフォーマンスの最適化が行われます。

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

要求されるリソースの初期数
画像には CSS スプライトまたは DataURI を使用します
外部リンク CSS での @import の導入を避ける
小さな静的リソース コンテンツを埋め込むことを検討してください
リソース gzip の最初のリクエスト後の総量は 静的リソース (HTML/CSS /JS/画像) は圧縮を最適化しますか?
大規模なクラス ライブラリのパッケージ化を避ける
アクセス層で Gzip 圧縮がオンになっていることを確認します (読み込み時間と引き換えに Gzip レベルを上げ、CPU オーバーヘッドを使用することを検討してください)
画像の代わりに CSS3 を使用してみてください
最初の最初の画面外の静的リソース (JS/CSS) の遅延読み込み
最初の最初の画面外の画像リソースはオンデマンドで読み込まれます (表示領域の決定) )
シングル ページ アプリケーション (SPA) は、ファースト スクリーン以外のビジネス モジュールの読み込みの遅延を検討します
キープアライブ リンクの再利用を有効にする
• 動作パフォーマンスを最適化して、スムーズな操作を実現

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

DOM の選択と計算をキャッシュします
ページの再描画をトリガーする操作を回避します
デバウンス高頻度のトリガー実行を避けるために、連続的にイベント (スクロール / サイズ変更 / touchmove など) をトリガーします
イベントのバッチ バインディングを避けるために、可能な限りイベント プロキシを使用します
代わりに CSS3 アニメーションを使用しますJS アニメーション
ローエンドを避ける マシン上では多数の CSS3 グラデーション シャドウ効果が使用されており、流暢性を向上させるために効果をダウングレードすることが考えられます
HTML 構造レベルを十分にシンプルに保ちます
CSS の高度なセレクターとワイルドカード セレクターはできるだけ使用しないでください
シンプルにしてください