なぜWebページの表示方法がPCとスマホで違うのか

Question

テラテイルの表示がパソコンとスマートフォンで違うのはなぜでしょうか？
普通に考えて、それぞれ適したレイアウトで用意されているのはわかるのですが、どのようなシステムで、切り替えることができるのでしょうか？

Answer 1

中の人ではないので断定はできませんが、teratailはユーザーエージェントによってスマートフォンとパソコンを判別して、読み込ませるCSSファイルなどを変えているようです。デバイスを振り分ける方法は色々あり、PHPやjavascriptでも可能です。

---

• スマートフォンとPCをユーザーエージェントで振り分ける
• htaccessによるデバイス振り分け
• スマホ・タブレット・PCの振り分けいろいろ

Answer 2

このサイトはレスポンシブではないのでパソコンかモバイルかはUserAgentで判別してますね。
出力されたHTMLのネストが汚いのでテンプレートエンジンを使っていると予想出来ます。
データを扱うサイトなのでサーバーサイドレンダリングでHTML/CSS/JSを出し分けてるんじゃないかと思いますにゃ。
サーバーがnode.jsならect、JAVAならftlが有名どころです。

余談：jQueryを3重4重も読み込んでるのでwebpackの設定変えた方がいいと思いますにゃ。

Comments

[maisumakun]

本題ではありませんが、どうやらteratailのシステムはCakePHP製のようです。