モバイルウェブ開発
このページでは、モバイル端末で適切に機能するウェブサイトを設計するために必要となる、主要な一部のテクニックの概要を説明します。 Mozilla の Firefox OS プロジェクトに関する情報を探している場合は、 Firefox OS のページを参照してください。または、 Android 版 Firefox に興味があるかもしれません。
モバイル端末向けの設計とブラウザー間の互換性の 2 つの節に整理しました。また、 Jason Grlicky によるウェブ開発者向けのモバイルへの親和性のガイドも参照してください。
モバイル端末向けの設計
モバイル端末は、デスクトップパソコンやノートパソコンと比較して、ハードウェアの特性がまったく異なります。画面は通常、明らかに小さくなりますが、ユーザーが端末を回転させると、画面の向きがポートレートモードとランドスケープモードの間で自動的に切り替わります。通常、ユーザー入力用のタッチスクリーンがあります。位置情報や画面の向きなどの API は、デスクトップでは未対応であったりあまり有用でなかったりしますので、これらの API はモバイルユーザーに、サイトと対話するための新しい方法を提供します。
小さな画面での作業
レスポンシブウェブデザインは、ウェブサイトのレイアウトを表示する環境 — 特に、大きさと画面の向き — の変化に合わせることができる一連の技術を表す用語です。これには次のような技術が含まれています。
viewport メタタグで、ブラウザーに対してユーザーの端末の適切な表示倍率でサイトを表示するよう指示します。
タッチ画面での操作
タッチ画面を使うには、 DOM タッチイベントの作業をする必要があります。 CSS の :hover
擬似クラスを使用することはできないでしょうし、指はマウスポインターより太いという事実を考慮して、クリック可能なアイテムをボタンのようにデザインする必要があるでしょう。この記事、 designing for touch screens を参照してください。
pointer または any-pointer メディアクエリーを使用して、タッチ可能な端末で異なる CSS を読み込むことができます。
画像の最適化
モバイル API
クロスブラウザー開発
クロスブラウザーコードを書く
様々なモバイル端末で受け入れられ動作するウェブサイトを作成するには、以下のことが必要です。
- ベンダー接頭辞のついた CSS プロパティなど、ブラウザーに依存した機能を使用することを避けるようにしてください。
- これらの機能に対応していないブラウザーでは、コンテンツが使用できる限り、ベンダー接頭辞付きの代替手段を提供しないでください。
-webkit-border-radius
のようなベンダー接頭辞つきプロパティは、現代の標準に対応していない古いブラウザーではパフォーマンスに悪影響を及ぼします。 - パフォーマンスを損なわないように代替手段を用いて新機能を使用するには、現在のブラウザーを対象としたスタイルを設定し、
@supports
機能クエリーを使用して、最新の CSS を対応するブラウザーのために使用するようにしましょう。
この Gecko 固有のプロパティの一覧と、この WebKit 固有のプロパティの一覧、そして Peter Beverloo の table of vendor-specific properties を確認してください。
ユーザーエージェントの推測に注意
以上のような手法を使用して、ウェブサイトが画面の大きさやタッチ画面などといった特定の端末特性を検出し、それに適応することが望ましい形です。しかし、これは非現実的である場合があり、ウェブサイトがブラウザーのユーザーエージェント文字列を解析して、デスクトップ、タブレット、携帯電話を区別し、端末ごとに異なるコンテンツを提供することに手を出しがちです。
これを行う場合は、アルゴリズムが正しく、特定のブラウザーのユーザーエージェント文字列を理解していないために、間違った種類のコンテンツをデバイスに提供していないことを確認してください。ユーザーエージェント文字列を使用して端末の種類を決定するガイドを参照してください。
複数のブラウザーでのテスト
ウェブサイトを複数のブラウザーでテストしてください。これは複数のプラットフォームでテストをするということです。 — 少なくとも iOS と Android です。
- iPhone のモバイル Safari をテストするには、 iOS シミュレーターを使用します
- Opera や Firefox は Android SDK でテストします。これらの詳しい操作方法は、 running Firefox for Android using the Android emulator を参照してください。