PC/スマホサイトの表示切替についての備忘録
はじめに
PCサイトとスマホサイトの両方を作る必要性があった場合、基本的にはメディアクエリやCSSフレームワークを用いたレスポンシブ方式(画面の幅でPCかスマホかを判別する)を用いていましたが、今の現場でユーザーエージェントを用いて切替を行う方式を学んだので、これを機にPCサイトとスマホサイトの表示切替方法について学んでみました。
ほぼほぼ備忘録的な内容なのでサクッとまとめています。
表示切替方法
PCサイトとスマホサイトの切替方法は3つあります。
- レスポンシブ対応
- ユーザーエージェントで判別する
- URL自体をPCとスマホで分ける
レスポンシブ対応
基本的にスマホ対応サイトを作成する場合はこの方法が挙げられるかなと思います。
画面幅を見てPCかスマホかを判断します。
メディアクエリを用いてゴリゴリ書く方法もあればBootstrap等の便利なライブラリ/フレームワークもあります。
ユーザーエージェントで判別する
ユーザーエージェントはサイトアクセス者のOSやブラウザを指します。
開発者ツールで確認することができ、Windows11のPCでChromeでサイトにアクセスした場合は以下のような文字列が表記されます。
このユーザーエージェントですが、スマホからアクセスした場合は「Mobile」や「iPhone」等、スマホでアクセスしたことを判別できる文字列があります。
そのため、その値などを用いてユーザがPCでアクセスしたのかスマホでアクセスしてきたのかを判別し、それぞれに適したHtmlを返却する、という手法が可能なのですね。
URL自体をPCとスマホで分ける
これはそのままで、PC版とスマホ版でURLが異なるというものです。
おわりに
下2つについては管理が大変ですが裏を返せばそれぞれのHTMLが存在するため、一つのHTMLしか用意しないレスポンシブ対応に比べてより自由度の高いデザインが可能という利点もあります。
以上、PC/スマホサイトの表示切替についての備忘録でした。
