質問: スマホでアクセスすると、スマホに適した状態で表示されるサイトがあります。 (私のサイトではありません。スマホ化する際に参考にしたいサイトです。) このサイトにPCからChromeを使ってアクセスして、ブラウザサイズを小さくしてもスマホ表示になりません。 PC用とスマホ用、2つの異なるサイトを用意していることが要因かと思うのですが、URLは同一です。 このサイトにPCからアクセスした場合、どのような方法でスマホ用の表示で閲覧することができますでしょうか? ブラウザの種類や設定によっては、PCでアクセスしても、ブラウザサイズを小さくすればスマホ用表示のデータを表示させることができるのでしょうか?
回答: Chromeをお使いなら、スマホのエミュレートができます。 PC版サイトが表示されてる状態から、右上三線メニューボタン→その他のツール(L)→デベロッパーツール(D) を選択。 出てきたDeveloper Tool ウインドウツールバーの虫眼鏡の隣、鏡みたいなアイコンをクリックすると、スマホモードになります。(はい、実はこれがスマホアイコンでした) 「Device」のドロップダウンリストから、たとえば「Apple iPhone6」などを選択すると、User Agent 文字列を変更し、iPhone6の画面サイズになります。 ただ、この時点ではサイズに合わせて縮小されるだけかもしれません、Reloadボタン(またはF5キー)を押すと、改めてスマホUserAgentでのアクセスをするので、スマホ版が表示されると思います。 (PC版/スマホ版切り替えに User Agent 判定をしているならば、ですが。) 画面の縦横サイズを具体的に入力することも可能です。 その数字枠の右に回転矢印ボタンがありますが、それが縦横入れ替えボタンです。 これでスマホ横向き状態で見るときのエミュレートも可能です。 -- 元に戻すときは、先ほどのスマホアイコンをクリックしてスマホモードを終了するか、Developer Tool ウインドウを消すことでも、スマホモード解除になります。