1.サーバー側
http要求でサーバーに送信されたブラウザー情報（ユーザーエージェント文字列）の分析に基づいて、モバイルバージョンのスタイルを接続するか、ユーザーをサイトのモバイルバージョンに対応するドメイン名にリダイレクトします。
モバイルバージョンが別のドメイン名にある場合は、meta.txtファイルを使用できます。 モバイルバージョンとコンピューターバージョンのエントリポイントを示します。
example.comのサンプルmeta.txtファイル（この場合のファイルアドレスはexample.com/meta.txt ）：
名前：example.com 説明：example.comは広く使用されているサンプルWebサイトです キーワード：例、デモ、デモンストレーション pc：http://www.example.com モバイル：http://m.example.com rss：http：//rss.example.com/rss/topstories.xml rss：http：//rss.example.com/rss/politics.xml ポッドキャスト：http://rss.example.com/podcasting/news.xml ビデオ：http://rss.example.com/rss/tutorial.xml 経度：12.3456789 緯度：98.7654321 地域：MM
コンピューターおよびモバイルバージョンのエントリポイントは、それぞれpcおよびmobile行で定義されます。
短所：
- 新しいブラウザは非常に頻繁に表示されるため、UserAgentリストは常に補充する必要があります。
- 常にUserAgentが正しく定義されているとは限りません。
2.クライアント側
a）メディア属性を指定する
< link rel ="stylesheet" href ="site.css" media ="screen" /> <br> < link rel ="stylesheet" href ="mobile.css" media ="handheld" />
値「screen」は通常のコンピューターに対応し、「handheld」はモバイルデバイスです。
短所：
- 時々、両方のスタイルシート（スクリーンとハンドヘルドの両方）がロードされます。
- 最近の多くのデバイスではサポートされていません。
b）メディア属性内でクエリを使用する
ほとんどの場合、スタイルはデバイスの幅に応じてロードされます。
< link rel = "stylesheet" href = "mobile.css" media = "only screen and (max-device width:480px)" />
一般に、このようなクエリを使用すると、ブラウザウィンドウまたはデバイスの幅と高さ、向き（縦または横）、解像度など、多くのことを判断できます。
マイナス：多くの古いデバイスではサポートされていません。
c）方法の組み合わせ
上記の方法は両方とも多くのデバイスでサポートされていないため、賢い人々はそれらの組み合わせを思いつきました。
< link rel = "stylesheet" href ="handheld.css" media ="handheld,only screen and (max-device-width:480px)" />
3.ユーザー選択
ユーザーに何も選択せずに何も定義する権利を与えることはできませんが、サイトのモバイルバージョンへのリンクを作成するだけです。
おわりに
サイトのモバイルバージョンがスタイルのみがコンピューターバージョンと異なる場合は、上記のすべてのオプションが適しています。 モバイルバージョンのhtmlマークアップがコンピューターバージョンと異なる場合、方法2は解決策ではありません。
この投稿は記事 「モバイルWebサイトを構築する方法」に 基づいています。
トピックに関する有用な資料
メディアクエリ - メディアクエリの使用に関するW3Cガイドライン
CSS3メディアクエリを使用してWebサイトのモバイルバージョンを作成する方法 -モバイルレイアウトでのメディアクエリに関する記事
metaTXT：モバイルWebブラウジングとメディアの発見を改善するための標準 -meta.txtの使用に関する詳細
ユーザーエージェント - ユーザーエージェント wiki記事