一般的なレスポンシブデザインでは、アクセスしている環境の画面のサイズでCSSの表示を切り替えることが多いと思います。(metaのviewportとCSSのmedia query)
そのため、PCのブラウザでも幅を狭めるとスマホ表示用のCSSに切り替わります。
その他の方法として.htaccessで端末を識別して切り分ける方法もあるかと思います。
その場合は、スマホ用のURLが下記のように
http://hoge.com/sp/
http://m.hoge.com/
別になり更新が2カ所になる、SEOのアクセスが別れるなどのデメリットがあると思います。
参考サイト
https://allabout.co.jp/gm/gc/386483/
サイトを見ていると、URLが同じにも関わらずPCで見たときはPC表示、スマホで見たときはスマホ表示になり、PCブラウザを狭めても表示が切り替わらないものもあります。
例えばLIGのサイトなどもそうです。
https://liginc.co.jp
ソースを見るとこのサイトにもmetaのviewportが書いてあるのですが、こうした仕組みのサイトはいったいどうやって端末の識別とワンソースURLを実現しているのでしょうか。
また、この仕組みを使えるとスマホで「PC表示」「スマホ表示」の切り替えボタンを設置することもできるのでしょうか。
※追記1
先ほど、同一URLで端末識別を行っている例としてLIGを上げましたが、
このteratailのWebサイト自体もその仕組みで作られておりました。
https://teratail.com/
このサイトをPCブラウザで狭めても表示は変わりませんが、
スマホでアクセスすると同一URLのままスマホ表示に切り替わります。
ソースには下記のviewportが書いてあります。
<meta name="viewport" content="width=1024">
※追記2
本質問の「関連した質問」にあるこちらの質問は内容が似ているかもしれません。こちらも合わせて読んでみます…
teratail,dotinstallのようなスマホのみデザインが切り替わる仕組み
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/10 07:21
退会済みユーザー
2017/03/10 07:39 編集
2017/03/14 13:47
2017/03/14 13:49