初めてのモバイル サイトを作成しようとしていますが、どこから始めればよいかわかりません。これは単純な html/css サイトなので、すぐにまとめられることを願っています。
訪問者がモバイルかどうかに基づいて、どのスタイル シートを使用するかをブラウザーに伝えるにはどうすればよいですか?
私は、テキスト エディタと firebug を手元に置いて、基本的なサイトを構築することに慣れています。他に必要なツールはありますか?
直感を使って、サイズが流動的なモバイル サイトを作成します。おそらくフォント サイズは固定です。
誰かが私のやり方に入れることができるガイドやいくつかの指針はありますか? 特に注意することはありますか？チェックリスト？できるだけシンプルにしようとしています。
モバイル サイト ABC とは何ですか?
理想的な世界では、次のように「ハンドヘルド」メディア スタイルシートを定義して、モバイル ブラウザにモバイル スタイルシートを使用するように指示します。
<link rel="stylesheet" href="handheld.css" media="handheld"/>
残念ながら、これは多くのモバイル ブラウザーでは機能しません。なんで？ブラウザ搭載の携帯電話を提供するハンドセット プロバイダは、「ゲットー化された」モバイル インターネットを提供していると見なされることを望んでいません。デスクトップ コンテンツだけで十分です。つまり、ほとんどのメーカーは、意図的にメディア タイプを無視するようにブラウザーを構築しています。
代わりに、ユーザー エージェント スニッフィングに基づいてスタイルシートを提供する必要があります (または、モバイル UA 文字列を持つユーザーをモバイル サブドメインにリダイレクトします)。これはサーバー レベルで行う必要があります。
ビルドとデバッグに関しては、モバイル エミュレーターは出回っていますが、その動作は不安定で、多くのデバイスが存在します。ほんの一握りの一般的なプラットフォームをテストし、最小公分母に基づいて設計しようとするだけで満足しなければならない場合があります。これは、デバイスが無関係な CSS で指定された画像をダウンロードできないほどスマートではない (したがって、CSS メディア クエリで大きな画像を調整しようとしないでください)、またはデバイスが JavaScript を実行しない可能性がある (ほとんどのデバイスでは JS 処理が貧弱である) と想定することを意味します。 .
ああ、もう 1 つ: JavaScript を使用する場合は、メソッドを疑似名前空間でラップしてみてください。多くのモバイル プロバイダーは Web リクエストをインターセプトし、大量の帯域幅を必要とする画像やその他の要素を置き換えるために独自の JS を挿入します。通常、これらのメソッドは「main」などの一般的な名前を使用し、Javascript に名前空間がないため、作成者が定義したメソッドと衝突します。
それ以外は、この記事 (http://www.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/) をご覧ください。頑張ってください!
メタタグ [code] viewport [/code] を使用して、画面幅に基づいて CSS シートを変更できます。