端末判定型サイトでスマホデザインをPCから確認する方法

「画面幅」ではなく「アクセスしてきた端末情報」で分岐しているサイトでは、PCでスマホデザインをそのまま確認することはできない。

通常のレスポンシブサイトとは仕組みが異なるため、確認方法も変わる。

レスポンシブとの違い

一般的なレスポンシブ設計では、同じHTMLを使い、画面幅に応じてCSSのみを切り替えている。
そのため、デベロッパーツールで画面サイズを変更するだけで、スマホ表示を簡単に確認できる。

一方で、端末判定型サイトはレスポンシブではない。
PCとスマホでHTML自体が異なる構造になっている。

サイトの仕組み（動的配信）

このタイプは「動的配信（Dynamic Serving）」と呼ばれる。

アクセス時にサーバー側で端末を判定し、PCにはPC用HTML、スマホにはスマホ用HTMLを返す仕組みになっている。

つまり、最初のアクセス時点で返ってくるデータ自体が違う。

なぜPCでスマホ表示ができないのか

PCからアクセスすると、PC用HTMLしか返ってこない。
そのため、デベロッパーツールで画面幅をスマホサイズに変更しても、レスポンシブのようにCSSだけで切り替えているわけではないため、単純な画面サイズ変更ではスマホ版にはならない。

解決方法（端末を偽装する）

スマホ版を確認するには、「スマホからアクセスしている」と認識させる必要がある。
つまり、User-Agentをスマホに変更して再読み込みする。

手順（Chrome）

1. 対象ページを開く
2. 右クリック → 検証
3. DevTools右上「⋮」→ More tools → Network conditions
4. 「User agent」のチェックを外す
5. iPhoneなどのモバイルを選択
6. ページをリロード

これでスマホ版のHTMLが返り、PCでもスマホデザインを確認できる。

まとめ

レスポンシブ：同じHTML、CSSで見た目だけ切り替え
動的配信：端末ごとに別HTMLを返す

動的配信の場合は画面サイズ変更ではなく「端末情報の偽装」という一手間が必要になる。