teratail,dotinstallのようなスマホのみデザインが切り替わる仕組み

Question

teratail,dotinstallのサイトはそれぞれPC, スマートフォンでデザインが切り替わります。

PC上でウィンドウを小さくしても表示はPC表示のままで、スマホでアクセスしたときだけCSSが適応されているようですが、これはどのように設定しているのでしょうか。

Ctrl+Uでソースを追っているのですが、どこで変更させているのか見当たりません。どなたか回答お願いします。

http://dotinstall.com/

Answer 1

いろいろ方法はあると思います。
この辺りの設定が見当たらないのであれば、
サーバー側で判別して画面表示を行っているのではないでしょうか？

Comments

[5o5o_wagon]

参考になりました！

Answer 2

ブラウザの幅を狭めてデザインが変わるなら、
『レスポンシヴ・デザイン』で、
ブラウザの幅に応じたデザインをＣＳＳで指定する（メディアクエリを記述する）方法だと思います。

ブラウザの幅を狭めてもデザインが変わらない場合、
.htaccess （ドット エイチティーアクセス）というファイルを使って、
アクセスしてきたブラウザのユーザーエイジェント（ブラウザなどの情報）を取得し、
自動的に、ＰＣ用ＨＴＭＬファイル、スマホ用ＨＴＭＬファイルに
振り分ける方法があり、
この方法を使っているかと思います。

レスポンシヴデザインの場合と違って、
スマホ用に適したサイズ（見た目も画像の重さも）で作成できるメリットがあります。

.htaccess というファイルは、
HTML・CSSなどの中でリンクするような記述は無いので、
サイトのソースを見ても分からないようになっています。
また、特殊なファイルなので、直接アクセスもできず、
中身を見る事は出来ませんが、
書き方などを調べる事が出来ます。

.htaccess では、他にもいろんな指定ができますので、
キーワードとして、
「.htaccess ユーザーエイジェント 振り分け」
などで検索すると、ある程度情報が出て来るかと思います。

上記キーワードで検索した時の検索結果
https://www.google.co.jp/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=.htaccess+%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%82%A8%E3%83%BC%E3%82%B8%E3%82%A7%E3%83%B3%E3%83%88+%E6%8C%AF%E3%82%8A%E5%88%86%E3%81%91

参考になれば幸いです。

Comments

[tk_9]

ありがとうございます！.htaccessで判断してPC・スマホと割り振っているのですね。

レスポンシブデザインと違い工数がかなり多くなりそうですが、ファイルサイズを最小に抑えることができるのはとても魅力的ですね。とても勉強になりました。

他に回答していただいた方もありがとうございます。

[Silent_Cait]

返答ありがとうございます。
レスポンシヴデザインは、ＣＳＳの記述量は多く、
ＨＴＭＬファイルは少なく済みますが、
記述量や手間は意外と多いかもで、
一概に .htaccess で振り分ける手間と変わらないかも知れません。

ＰＣ表示では、マウスオーバーの効果を良く使い、
これはとても良い効果だと思いますが、
スマホではこの効果の意味が無いので、
そういう意味でも、振り分ける方が良い場合もあるかも知れません。

[tk_9]

追加の回答ありがとうございます。レスポンシブ対応をするか、.htaccessで対応するかは、実装する側の好みの問題も少なからず含みそうですね。

完全に実装を分けて処理を別個にした方が、漏れなくマウスオーバーの効果を振り分けられるのも魅力的な点なのですね。

補足: すこし調べてみると、PHPの$_SERVER['HTTP_USER_AGENT']を使って判別する方法もあるようです。同じ疑問を持った方の参考用にここで補足しておきます。

Answer 3

http://blog.ousaan.com/index.cgi/links/20130925.html
viewport メタタグで指定するみたいです。
teratail もつい最近このメタタグを配置してくれたのでipad でとても見やすくなりましたが、
自分が思っていたのは上記の記事を見ると間違った覚え方だったようです。