レスポンシブかスマホ用サイトなのかの見分け方を教えてください。

Question

https://web-kanji.com/
例えばこちらのサイトは、
PC版だと右側の地図が表示されて、
スマホだとドロップダウンメニューになっています。
こういうサイトはスマホ用サイトとPC用サイトで別れてるのでしょうか？
見分け方が分かりません。
あとスマホ用サイトのコードを見るにはどうすれば見れますか？
検証モードで画面サイズをスマホ用にしても分かりませんでした。

Comments

[miyabi_pudding]

> 検証モードで画面サイズをスマホ用にしても分かりませんでした。

何がどうわからなかったのでしょうか？

[takawork]

どの部分にスマホ用コードが出てくるのかが分かりませんでした。

Answer 1

該当サイトは、いわゆるレスポンシブサイトです。(PCとスマホのビューポートでスタイルが切り替えられています。)
スマホ端末でサイトへアクセスしたとき、専用ページへアクセスする類のものではありません。

検証モードで画面幅をスマホ用に変えた場合は、それに合わせてスマホ用画面へ表示も変わりますが、HTML自体は何も変わりません。
CSSで各HTML要素を表示・非表示などを切り替えています。
(※一部javascriptによってHTML要素を増減させている可能性もありますが。)

Answer 2

地図の箇所だけに言及すると、PC用の地図とスマホ用の
ドロップダウン両方のHTMLを出力しています。

幅が600px以下であればPC用の地図を非表示、
600px超であればスマホ用のドロップダウンを非表示、
としているようです。

・display-pc
・display-sp
というclassのdivタグにそれぞれコーディング
されていることが確認できます。