WEBAPP開発スキルのまとめ（モバイルWebサイト開発の注意点）

1. レスポンシブな Web を開発するには、ページを画面サイズに適応させる必要があります。前の記事で説明したように、流動的なレイアウトを使用できます (アダプティブ幅レイアウト)。その他の特定の小さな問題は、メディア クエリを使用することで解決できます (レスポンシブ Web デザインと CSS3 メディア クエリを実現するために、IE で CSS3 メディア クエリをサポートするようにします)。
2. ほとんどの携帯電話には高度なブラウザが搭載されているため、HTML5 + CSS3 開発を使用できます。
3. 以下のように、メタタグを合理的かつ柔軟に使用します。

4. リンクのサイズに注意してください。ほとんどの携帯電話はタッチスクリーンなので、ユーザーはラベルを簡単にクリックできる必要があります (以前記事を見たことがありますが、今はソースが見つかりません。最小サイズは 42px*42px のようです)。

操作オブジェクトのサイズは指の操作に合わせており、キーのサイズは仕様に従って設定されています。
人差し指のクリック間隔は約7×7mm、1mm間隔です。
親指クリック 8 x 8 mm、間隔 2 mm。現在推奨されている値は 9mm で、最小値は 7mm 以上である必要があります。
もちろん、重要な操作や頻繁にクリックする領域は少し大きめに設定することもできます。

5. グレースフル デグラデーション (スムーズなデグラデーション) を実現し、JS や画像の使用を減らす必要があります。また、ユーザーが JS や画像のダウンロードを禁止する場合、ページはその価値を反映する必要があります (多くのアプリは、3G 環境では画像やその他のリソースを自動的にダウンロードしないようにデフォルトで設定されているため)。
6. 画像処理では、幅を設定するだけで画像が適応的になり、変形を防ぎます。もちろん、対応デバイスの解像度が大きく異なる場合は、メディアクエリを使用して、異なる解像度に応じて異なる画像をロードする必要があります（同じ画像をいくつかの異なる仕様に設定する必要があります）。これは、解像度の低いデバイスが大きな画像を読み込んでトラフィックを無駄にしたり、解像度の高いデバイスが小さな画像を読み込んで画像がぼやけたりするのを防ぐためです。
7. 解像度の設定が小さすぎて、通常のモジュールが混雑して見える場合は、メディアクエリを使用して、768px で 2 列レイアウトを表示し、320px で 1 列レイアウトを表示するなど、解像度に応じてモジュールを適切に表示または非表示にすることができます。

8. もちろん、異なる端末に基づいて異なるURLにジャンプすることもできます。参照：携帯電話やタブレットなどのモバイル端末向けのJavaScriptでジャンプURLに適応する
9. モバイルブラウザは数多くあり、モバイルシステムのデフォルトの処理方法も異なります。互換性の問題はPC版ほど単純ではないため、よく使われる処理方法をまとめる必要があります。例えば、-webkit-tap-highlight-color:rgba(0,0,0,0); /*リンクのハイライトを無効にする*/ -webkit-touch-callout:none; /*リンクを長押ししてオプションメニューをポップアップするのを無効にする*/ などです。
10. モバイル フォンやタブレットではトラフィックが非常に重要なので、Web アプリのクラス名と ID は、先頭は hd、中間は bd、下部は ft など、できるだけ区別できるものにする必要があります (この提案は、後のメンテナンスやその他の問題に便利かどうかを考慮しているため保留中です)。