レスポンシブでなくユーザーエージェントでサイト構築

質問

レスポンシブではなく、ユーザーエージェントで切り替わるサイトを作ろうと
あれこれリサーチをしております。そこで見つけたのが下記サイト。

http://mery.jp/

レスポンシブではなく、訪問した媒体でページが切り替わります。

スマフォで見るとページ上部にメニューボタンが出ます。
YouTubeのようにメイン画面が右にずれてメニューが表示されるというもの。

こんな感じで作りたいなと思ったのですが、
パソコンで見た時とスマフォで見た時にHTMLの構造が違っておりました。
CSSの振り分けだけを行っているのかと思っていたのですがそうではないのか？

一番わかりやすいかと思うのが、そのメニュー。
パソコンでソースを表示させると見るとそのメニューのソースがどこにもありません。
しかしスマフォ版のものをパソコンで表示してソースを見るとソースがちゃんとあります。

HTMLひとつで振り分けるとなるとそのソースは記載されていて、
パソコン用のCSSが「dispaly:none」
スマフォ用のCSSが「dispaly:block」
にしているだけだと思っていました。

このサイトの場合、そうではない手段をとっているのかと思いますが、
どんな手段をとっているのかお分かりの方いらっしゃいますでしょうか。
ご教授いただければ幸いです。

回答No.1

ORUKA1951 · ベストアンサー

HTTP要求ヘッダに含まれる、
firefox
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:26.0) Gecko/20100101 Firefox/26.0
iphone5
User-Agent: Mozilla/6.0 (iPhone; U; CPU iPhone OS 6_0 like Mac OS X; ja-jp) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/6.0.0 Mobile/8J2 Safari/7875.18.5

　すなわち、サーバーの.htaccessなり、HTTP_USER_AGENT--(CGI,PHPなど)でHTML出力を変更しています。それ以上はわかりません。

　この方法は、あまり感心しません。新しいuserAgentが登場するたびに、その指示を書き換えなければならない。膨大なユーザーエージェントに対応できない。現に携帯電話やメジャーでないユーザーエージェントを指定するとパソコン用と同じものが返ってきます。
　firefox + FireMobileSimulator( https://addons.mozilla.jp/firefox/details/8519 )で確認!!

　また、複数のコンテンツを作成する必要があるなど、HTML本来の
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。
・・・【中略】・・・
　HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より

　に反するからです。

お礼

参考になりました。
どうもありがとうございました！