みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

ブラウザサイズとモバイル化について教えて下さい。

スマホでアクセスすると、スマホに適した状態で表示されるサイトがあります。
(私のサイトではありません。スマホ化する際に参考にしたいサイトです。)
このサイトにPCからChromeを使ってアクセスして、ブラウザサイズを小さくしてもスマホ表示になりません。
PC用とスマホ用、2つの異なるサイトを用意していることが要因かと思うのですが、URLは同一です。
このサイトにPCからアクセスした場合、どのような方法でスマホ用の表示で閲覧することができますでしょうか?
ブラウザの種類や設定によっては、PCでアクセスしても、ブラウザサイズを小さくすればスマホ用表示のデータを表示させることができるのでしょうか?

投稿日時 - 2015-07-07 01:19:54

QNo.9007575

困ってます

質問者が選んだベストアンサー

Chromeをお使いなら、スマホのエミュレートができます。

PC版サイトが表示されてる状態から、右上三線メニューボタン→その他のツール(L)→デベロッパーツール(D) を選択。

出てきたDeveloper Tool ウインドウツールバーの虫眼鏡の隣、鏡みたいなアイコンをクリックすると、スマホモードになります。(はい、実はこれがスマホアイコンでした)

「Device」のドロップダウンリストから、たとえば「Apple iPhone6」などを選択すると、User Agent 文字列を変更し、iPhone6の画面サイズになります。
ただ、この時点ではサイズに合わせて縮小されるだけかもしれません、Reloadボタン(またはF5キー)を押すと、改めてスマホUserAgentでのアクセスをするので、スマホ版が表示されると思います。
(PC版/スマホ版切り替えに User Agent 判定をしているならば、ですが。)

画面の縦横サイズを具体的に入力することも可能です。
その数字枠の右に回転矢印ボタンがありますが、それが縦横入れ替えボタンです。
これでスマホ横向き状態で見るときのエミュレートも可能です。

--

元に戻すときは、先ほどのスマホアイコンをクリックしてスマホモードを終了するか、Developer Tool ウインドウを消すことでも、スマホモード解除になります。

投稿日時 - 2015-07-07 10:05:54

お礼

回答ありがとうございます。早速試してみます。

投稿日時 - 2015-07-08 14:29:37

ANo.3

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.2

たぶんUserAgentを見て出し分けを行っているのではないかと思われます。
ブラウザの拡張機能等でUserAgentを変える事が出来るものがありますので、そういったものを試されてはどうでしょうか。

投稿日時 - 2015-07-07 06:37:46

画面のサイズではなく、
機種を判別してサイトを構成しているサイトなので、
サイズがどうの?は無関係です。

モバイルならモバイル用サイトをCGIなどで送り出しているか、
HTML内で、モバイル用の表示にCSSなどを使って構成しているか?です。

ただサイズをいじっても、モバイル用になるわけではありません。

投稿日時 - 2015-07-07 05:38:01

あなたにオススメの質問