スマホ用ページへの振り分け

質問

今、スマートフォン用のホームページを作っています。
PC用ページからスマートフォン用のホームページへ飛ばす方法を質問させてください。

現在、ページにJavascriptを埋め込み、UserAgentで判断してiPhone、iPod、Androidの場合は、
スマートフォン用のページに自動で飛ばす仕組みを作っています。

この作り方だと問題がありまして、

例えば、Android4.0の標準ブラウザやAndroid用Google Chromeでは
「デスクトップ版を表示」や、「PC版サイトのリクエスト」というのがあります。
スマホでYahoo!やAmazonのスマホ用ページを表示した後、ブラウザでこのチェックを付けるとPC版のページを表示します。

自分の作ったページでは、UserAgentで判断してページ自体を違うページに移動してしまっているので、
「デスクトップ版を表示」にチェックしてもPC版ページを表示しません。当然です。

質問ですが、

１．Yahoo!やAmazonのページは、どういう仕組みで、PC用とスマホ用ページを振り分けているのでしょうか？

２．ブラウザの「デスクトップ版を表示」のチェックがやっていることは、
UserAgentを偽装してPC用のUserAgentを吐き出しているだけ、という理解は正しいですか？

以上、宜しくお願いします。

回答No.1

ORUKA1951 · ベストアンサー

まず、それらのサイトのURLをご覧ください。PC用もスマートホン用もURLは同じはずです。
そもそも、
＞スマートフォン用のホームページを作っています。
　が間違っているのです。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。 もし【相互運用性確保の】努力が成されなければ、Webは互換性のないフォーマット毎に分け隔てられた世界に分割され、すべての関係者にとっての商業的可能性が減少することとなるであろう、大きなリスクを負うこととなる。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［2.2.1 HTMLの略歴( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より
★仕様書のこの項目は必読です。前後も読んでおくこと
　そもそも、今後もますます色々な端末が登場しますが、その都度同じ内容のHTMLを作り続けるつもりですか？??考えただけでぞっとします。

　できれば一つのHTMLで、端末によって適用されるスタイルシートを変えるようにすればよいだけです。
→14.2.4 出力メディア型 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.2.4 )

　以下が参考になるでしょう。他にもさまざまなサイトで紹介されています。
CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き ( http://webdesignrecipes.com/web-design-for-mobile-with-css3-media-queries/ )

お礼

ありがとうございます。
スタイルシートを別々に用意していたのですね。